javascript 데모 모드 창

아래 Demo 는 리 셋 을 지원 합 니 다.modalDialog.js 를 직접 참조 하여 사용 할 수 있 습 니 다.Jquery 의 그림자 global.js

 
window.js = new myJs(); //              ,    myJs   window   ，          window.js 
//js   
function myJs() { 
this.x = 10; 
} 
//     myJs     
myJs.prototype.alert = function (msg) { alert(msg); } //  alert      js.alert('    '); 
//    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:blank"; //   
this.title = null; //   
this.width = 400; //    
this.height = 300; //    
this.borderColor = "black"; //     
this.borderWidth = 2; //     
this.callback = null; //     
this.background = "black"; 
this.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 = this.background; 
modalDialog.prototype.borderWidth = this.borderWidth; 
modalDialog.prototype.borderColor = this.borderColor; 
modalDialog.prototype.titleBackground = this.titleBackground; 
modalDialog.prototype.callback = this.callback; 
//       
modalDialog.prototype.call = function (callback) { if (callback != null) callback(this); if (this.callback != null) this.callback(); } 
//   
modalDialog.prototype.show = function () { 
var js = window.js; 
//           
var x = js.bodyWidth, y = js.bodyHeight; 
//          body 
var zdiv = "zdiv"; //   id 
document.body.innerHTML += "<div id='" + zdiv + "' style='width:" + x + "px;height:" + y + "px;background-color:" + 
this.background + ";position:absolute;top:0;left:0;" + 
"filter:alpha(opacity=80);opacity:0.8;z-index:'></div>"; 
var mdiv = "mdiv"; //     id 
document.body.innerHTML += "<div id='" + mdiv + "' style='width:" + this.width + "px;height:" + this.height + "px;" + 
"border:solid " + this.borderWidth + "px " + this.borderColor + ";z-index:20;position:absolute;top:" + 
(y - this.height) / 2 + ";left:" + (x - this.width) / 2 + ";'>" + 
//     
(this.title != null ? "<div style='background:" + this.titleBackground + ";line-height:30px;padding:0 10px;width:100%'>" + this.title + "</div>" : "") + 
"<div style='padding:1px;'><iframe src='" + this.uri + "' frameborder='0' scrolling='no' style='width:" + (this.width) + "px;height:" + 
(this.title != null ? this.height - 30 : this.height) + "px;'></iframe></div></div>"; 
} 
modalDialog.prototype.close = function () { 
document.body.removeChild(window.js.$("mdiv")); 
document.body.removeChild(window.js.$("zdiv")); 
}

default.html 페이지 에 modalDialog 코드

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>    Demo</title> 
<!--    js        js  --> 
<script type="text/javascript" src="global.js"></script> 
<!--ModalDialog UI js  --> 
<script type="text/javascript" src="modaldialog.js"></script> 
<script type="text/javascript"> 
var md; //       
var uri = "/test.html"; 
function showModalDialog() { 
//         
var m = new modalDialog(); 
m.uri = uri; 
m.title = "    "; 
m.background = "white"; 
m.borderColor = "orange"; 
m.borderWidth = 2; 
m.titleBackground = "gold"; 
m.callback = function () { m.close(); } 
// m.call();        modalDialog Uri    
m.show(); 
md = m; 
} 
</script> 
</style> 
</head> 
<body> 
<div> 
 javascript+css  ModalDialog<br /> 
Jquery                 ，            
<br /> 
<input id="btopenDialog" type="button" value="      !" onclick="showModalDialog()" /> 
</div> 
</body> 
</html>

를 만 들 고 modalDialog 페이지 에 window.parent.md.call()트리거 리 셋 함수파일 패키지 다운로드를 사용 합 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

javascript 데모 모드 창

좋은 웹페이지 즐겨찾기