初探弹出层的实现原理
生活随笔
收集整理的這篇文章主要介紹了
初探弹出层的实现原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先用幾句話來描述一下實現過程，好有個思路嘛^^：（1）先創建一個div層將整個屏幕罩住（所謂的遮罩層），可設置該層的屬性，例如透明度（2）在遮罩層內創建div來展示內容（這里暫時稱為內容展示層），在該層就可以靈活的創建個人需要的HTML組件了。例如你在內容展示層中創建了一個iframe，嘿嘿，你就可以請求指定的URL并將其返回的內容呈現在這個iframe之中。
下面就趕緊來看看如何實現吧
1、先上HTML代碼
<body><div>body content</div><a href="javascript:void('打開彈出層');" onclick="openDialog();">打開彈出層</a></body>?
呵呵
2、上Javascript部分
看上去有點兒長^^
<script>window.myLayers = {};myLayer = function(opts){//默認參數var params = {width: 500,height: 370,title: '我的窗口',btnWrapH: 37,titleWrapH: 31,opacity: 0,mask: true,okClick: function(){}}//設置參數 opts = opts ? opts : {};this.mask = (opts.mask == true || opts.mask == false) ? opts.mask : params.mask;this.okClick = opts.okClick ? opts.okClick : params.okClick;this.url = opts.url ? opts.url : "";this.content = opts.content ? opts.content : null;this.width = opts.width ? opts.width : params.width;this.height = opts.height ? opts.height : params.height;this.title = opts.title ? opts.title : params.title;this.btnWrapH = opts.btnWrapH ? opts.btnWrapH : params.btnWrapH;this.titleWrapH = opts.titleWrapH ? opts.titleWrapH : params.titleWrapH;this.opacity = opts.opacity ? opts.opacity : params.opacity;this.id = opts.id ? opts.id : parseInt(Math.random()*10000); //設置IDvar _top = window;while(_top && (_top.parent != _top.self) && _top.parent.frames.length == 0){_top = _top.parent;}this.left =_top.document.documentElement.clientWidth && _top.document.body.clientWidth/2 - this.width/2;this.top = _top.document.documentElement.clientHeight && _top.document.body.clientHeight/2 - this.height/2;this.left = this.left < 0 ? 0 : this.left;this.top = this.top < 0 ? 0 : this.top;//保存，便于在方法之間引用 myLayers[this.id] = this;};//核心方法 myLayer.prototype.open = function(){//定義遮罩層var _maskDiv = "<div id='_maskDiv_"+this.id+"' style='position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; margin: 0; opacity: "+this.opacity+"; filter: alpha(opacity="+(this.opacity*100)+");'></div>"//按鈕var _wrapBtn = "<div style='height: "+this.btnWrapH+"px; width: 100%; background-color: #20B2AA; position: relative;'><a href='javascript:void(0);' οnclick='myLayers[\""+this.id+"\"].cancelBtnClick(\""+this.id+"\");' style='float: right; display: inline-block; margin-right:10px; color: green;background-color: white; padding: 1px 10px; height: 27px; margin-top: "+((this.btnWrapH - 29)/2)+"px; line-height: 27px; text-decoration: none;'>關閉</a><a href='javascript:void(0);' onclick='myLayers[\""+this.id+"\"].okBtnClick(\""+this.id+"\");' style='float: right; display: inline-block; margin-right: 10px; color: green; padding: 1px 10px; margin-top: "+((this.btnWrapH - 29)/2)+"px; height: 27px; line-height: 27px; background-color: white; text-decoration: none;'>確認</a></div>";//iframevar _iframe = "<iframe style='width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px; background-color: white; overflow: auto; ' src='"+this.url+"' frameborder='0'></iframe>";//content屬性優先var _content = this.content ? this.content : _iframe;//內容展示層var _wrapIframe = "<div id='_wrapIframe_"+this.id+"' style='border: 1px solid #E0FFFF; position: absolute; left: "+this.left+"px; top: "+this.top+"px; margin: 0 auto; padding: 0; width: "+this.width+"px; height: "+this.height+"px; background-color: white;'><h3 style='position: relative; margin: 0; padding: 5px 0 5px 10px; height: 31px; line-height: 31px; background-color: #20B2AA; overflow: hidden;'><a style='height: "+this.titleWrapH+"px; line-height: "+this.titleWrapH+"px; float: right; top: 31px; margin-right: 20px; padding: 3px 10px; font-size: 17px;' href='javascript: void(0);' οnclick='myLayers[\""+this.id+"\"].closeLayer(\""+this.id+"\");'>關閉</a><span style='overflow: hidden;'>"+this.title+"</span></h3><div style='width: 100%; height: "+(this.height-(this.titleWrapH+10)-this.btnWrapH)+"px;'>"+_content+"</div>"+_wrapBtn+"</div>";var body = window.document.body;//是否顯示遮罩層if(this.mask == true){body.innerHTML = body.innerHTML + _maskDiv;}body.innerHTML = body.innerHTML + _wrapIframe;};//關閉 myLayer.prototype.closeLayer = function(layerId){var _w = document.getElementById("_wrapIframe_"+layerId);_w.parentNode.removeChild(_w);var _m = document.getElementById("_maskDiv_"+layerId);_m && _m.parentNode.removeChild(_m);};//事件 myLayer.prototype.okBtnClick = function(layerId){myLayers[layerId].closeLayer(layerId);myLayers[layerId].okClick();};myLayer.prototype.cancelBtnClick = function(layerId){myLayers[layerId].closeLayer(layerId);};//調用打開彈出層function openDialog(){var opts = {opacity: 0.31,title: '我的標題',height: 430,width: 560,url: "layer.htm",mask: true,okClick: function(){alert("我被執行了。OK,可以提交表單了。");},content: "<p style='color: red;'><a href='javascript:void(\"打開彈出層\");' οnclick='openDialog();'>打開彈出層</a></p>"}new myLayer(opts).open();}</script>?以上就是全部代碼
?僅僅是初探。
?附上執行檔地址：http://www.zhaojz.com.cn/demo/layer.htm
轉載于:https://www.cnblogs.com/zhaojz/p/4186672.html
總結
以上是生活随笔為你收集整理的初探弹出层的实现原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： textbox回车事件中拿不到text的
- 下一篇： 求方程解问题