javascript 데모 모달 window_javascript 기술

다음 데모는 콜백을 지원하며 modalDialog.js를 참조하여 직접 사용할 수 있습니다. Jquery
global.js

코드 복사 코드는 다음과 같습니다.

window.js = new myJs(); //이름 중복을 피하기 위해 이름을 변경하고 window 개체에 myJs 개체를 추가합니다. , 그리고 페이지에서 window를 호출합니다. .js
//js object
function myJs() {
this.x = 10;
}
//아래에서 myJs를 확장해 보겠습니다. >myJs.prototype.alert = function (msg) { Alert(msg) } //경고 메서드 테스트는 js.alert('pop-up Prompt')를 호출합니다.
//지정된 ID를 가진 dom 개체 가져오기
myJs.prototype.$ = function (id) { return document.getElementById(id) }
myJs.prototype.bodyWidth = document.documentElement.clientWidth =
myJs.prototype.bodyHeight = document.documentElement .clientHeight;
myJs.prototype.body = document.body;

modalDialog.js 파일 코드는 다음과 같습니다.
코드

코드 복사 코드는 다음과 같습니다.

//Modaldialog
function modalDialog() {
this.uri ="about: 공백"; //주소
this.title = null; / /Title
this.width = 400; //기본 너비
this.height = 300; //기본 높이
this.borderColor = "black"; //테두리 색상
this.borderWidth = 2; //테두리 너비
this.callback = null; //콜백 메서드
this.Background = "black"; .titleBackground = "silver";
}
modalDialog.prototype.url = this.uri; //확장 없이 가능하지만 페이지에는 이 속성을 찾을 수 없다는 메시지만 표시됩니다.
modalDialog.prototype .title = this.title;
modalDialog.prototype.width = this.width;
modalDialog.prototype.height = this.height;
modalDialog.prototype.Background =
modalDialog .prototype.borderWidth = this.borderWidth;
modalDialog.prototype.borderColor;
modalDialog.prototype.titleBackground = this.titleBackground; >//트리거 콜백 메서드
modalDialog.prototype.call = function (callback) { if (callback != null) callback(this); if (this.callback != null) this.callback() }
//Show
modalDialog.prototype.show = function () {
var js = window.js;
//내부에 표시 세부정보 구현
var x = js.bodyWidth, y = js .bodyHeight;//먼저 몸 전체를 덮는 레이어 마스크를 만듭니다.
var zdiv = "zdiv" //마스크 레이어 ID
document.body.innerHTML = "

this.Background ";위치:절대;상단:0;왼쪽:0;" filter:alpha(opacity=80);opacity:0.8;z-index :'>

";
var mdiv = "mdiv"; //모달 창 레이어 ID
document.body. innerHTML = "

" 🎜>//제목 추가
(this.title ! = null ? "

" this.title "

" : "" )
"

" ;
}
modalDialog.prototype.close = function () {
document.body.removeChild(window.js.$("mdiv" ));
document.body.removeChild(window.js.$("zdiv"))
}


default.html modalDialog 만들기
코드

코드 복사


코드는 다음과 같습니다.

🎜>



🎜>

Javascript CSS를 사용하여 ModalDialog 구현
Jquery 프레임워크에는 이 효과를 얻을 수도 있는 플러그인이 있습니다.

window.parent.md.call()을 사용하여 modalDialog 페이지 기능

파일 패키징 스크립트 홈 다운로드