JQ制作简易弹窗效果

2024-12-08 技术教程

为什么要做这个，主要是任务需要，其次为了不引用过多的插件。
1、先定义一个div，并把它脱离文档流，这样他就有机会漂浮在页面上
2、在定义好的div里写弹窗的内容
3、调整样式，设置定义好的div的高度，满屏（宽度比较容易，高度就需要定义个函数来设置）
4、最后将div的display设置为none，事件触发时再将其展示。

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <script src="../sas/js/jquery-1.9.1.min.js" type="text/javascript"></script></head><style> .dialog-show{ display: none; position: absolute; width: 100%; padding:0; text-align: center; background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000); top:0; z-index: 9999; } .closeBtn{ position: absolute; top: 10px; right: 10px; color: white; cursor: pointer; } .iframeBox{ margin-top: 30px; height: 400px; }</style><body ><button onclick="showDialog()">查看</button><div id="dialogModal" class="dialog-show"> <span class="closeBtn" onclick="closeDialog()">X</span> <iframe width="80%" class="iframeBox" src="http://baidu.com"></iframe> </div></body><script> $(function () { setHeight(); }) //打开弹窗 function showDialog() { $("#dialogModal").show() } //关闭弹窗 function closeDialog() { $("#dialogModal").hide() } //设置样式高度 function setHeight() { var _useH =$(window).height(); $("#dialogModal").height(_useH) }</script></html>