为什么要做这个,主要是任务需要,其次为了不引用过多的插件。
1,先定义一个div,并把它脱离文档流,这样他就有机会漂浮在页面上
2,在定义好的div里写弹窗的内容
3,调整样式,设置定义好的div的高度,满屏(宽度比较容易,高度就需要定义个函数来设置)
4,最后将div的显示设置为无,事件触发时再将其展示。
<代码> & lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,最小规模=1.0,最大范围=1.0,user-scalable=不”/比;
& lt;脚本src=" https://www.yisu.com/sas/js/jquery-1.9.1.min.js " type=" text/javascript祝辞& lt;/script>
& lt;/head>
& lt; style>
.dialog-show {
显示:没有;
位置:绝对的;
宽度:100%;
填充:0;
text-align:中心;
背景:rgba (0, 0, 0, 0.5);
过滤器:progid: DXImageTransform.Microsoft.gradient (startcolorstr=# 7 f000000 endcolorstr=# 7 f000000);
上图:0;
z - index: 9999;
}
.closeBtn {
位置:绝对的;
上图:10 px;
右:10 px;
颜色:白色;
光标:指针;
}
.iframeBox {
margin-top: 30 px;
身高:400 px;
}
& lt;/style>
& lt;身体比;
& lt; button>查看& lt;/button>
& lt; div id=癲ialogModal”class=癲ialog-show”比;
& lt;跨类=" closeBtn "祝辞X
& lt; iframe宽度=?0%”class=癷frameBox src=" http://baidu.com "祝辞& lt;/iframe>
& lt; !——& lt; iframe宽度=?0%”src=" http://120.36.133.54:1688/订阅/主/MainFrame.aspx”祝辞& lt;/iframe>——比;
& lt;/div>
& lt;/body>
& lt; script>
& lt; !——初始化——比;
$(函数(){
setHeight ();
}）//打开弹窗
函数showDialog () {
$ (" # dialogModal "),告诉()
}//关闭弹窗
函数closeDialog () {
$ (" # dialogModal ") hide ()
}//设置样式高度
函数setHeight () {
var _useH=$(窗口).height ();
$ (" # dialogModal ") .height (_useH)
}
& lt;/script>
& lt;/html> 
