厦门市建设局网站公布,百度如何做广告,wordpress 插件 您没有足够的权限访问该页面,无锡网站seo报价首先用几句话来描述一下实现过程#xff0c;好有个思路嘛^^#xff1a;#xff08;1#xff09;先创建一个div层将整个屏幕罩住#xff08;所谓的遮罩层#xff09;#xff0c;可设置该层的属性#xff0c;例如透明度#xff08;2#xff09;在遮罩层内创建div来展示…首先用几句话来描述一下实现过程好有个思路嘛^^1先创建一个div层将整个屏幕罩住所谓的遮罩层可设置该层的属性例如透明度2在遮罩层内创建div来展示内容这里暂时称为内容展示层在该层就可以灵活的创建个人需要的HTML组件了。例如你在内容展示层中创建了一个iframe嘿嘿你就可以请求指定的URL并将其返回的内容呈现在这个iframe之中。 下面就赶紧来看看如何实现吧 1、先上HTML代码 bodydivbody content/diva hrefjavascript:void(打开弹出层); onclickopenDialog();打开弹出层/a/body 呵呵 2、上Javascript部分 看上去有点儿长^^ scriptwindow.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 styleposition: 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 styleheight: this.btnWrapHpx; width: 100%; background-color: #20B2AA; position: relative;a hrefjavascript:void(0); οnclickmyLayers[\this.id\].cancelBtnClick(\this.id\); stylefloat: 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;关闭/aa hrefjavascript:void(0); onclickmyLayers[\this.id\].okBtnClick(\this.id\); stylefloat: 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 stylewidth: 100%; height: (this.height-(this.titleWrapH10)-this.btnWrapH)px; background-color: white; overflow: auto; srcthis.url frameborder0/iframe;//content属性优先var _content this.content ? this.content : _iframe;//内容展示层var _wrapIframe div id_wrapIframe_this.id styleborder: 1px solid #E0FFFF; position: absolute; left: this.leftpx; top: this.toppx; margin: 0 auto; padding: 0; width: this.widthpx; height: this.heightpx; background-color: white;h3 styleposition: relative; margin: 0; padding: 5px 0 5px 10px; height: 31px; line-height: 31px; background-color: #20B2AA; overflow: hidden;a styleheight: this.titleWrapHpx; line-height: this.titleWrapHpx; float: right; top: 31px; margin-right: 20px; padding: 3px 10px; font-size: 17px; hrefjavascript: void(0); οnclickmyLayers[\this.id\].closeLayer(\this.id\);关闭/aspan styleoverflow: hidden;this.title/span/h3div stylewidth: 100%; height: (this.height-(this.titleWrapH10)-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 stylecolor: red;a hrefjavascript:void(\打开弹出层\); οnclickopenDialog();打开弹出层/a/p}new myLayer(opts).open();}/script 以上就是全部代码 仅仅是初探。 附上执行档地址http://www.zhaojz.com.cn/demo/layer.htm转载于:https://www.cnblogs.com/zhaojz/p/4186672.html
