javascript Demo模態視窗

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

下面這個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>

<script type="text/javascript" src="global.js"></script>

<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()觸發回呼函數
檔案打包指令碼之家下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More