JS弹窗JS弹出DIV并使整个页⾯背景变暗功能的实现代码
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>js拖拽效果</title>
<script src="apps.bdimg/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div >
111111
<button onclick="showWindow()">点击显⽰弹框</button>
</div>jquery弹出div窗口
<!-- 遮罩层 -->
<div id="cover"
>
</div>
<!-- 弹窗 -->
<div id="showdiv"
background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;">
提⽰
</div>
<!-- 内容 -->
<div >
js弹窗 js弹出DIV，并使整个页⾯背景变暗
</div>
<!-- 按钮 -->
<div style="background: #418BCA; width: 80%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; t
ext-align: center;color: #fff;margin-top: 1rem; -moz-b onclick="closeWindow()">
确定
</div>
</div>
</body>
<script type="text/javascript">
// 弹窗
function showWindow() {
$('#showdiv').show();  //显⽰弹窗
$('#cover').css('display', 'block'); //显⽰遮罩层
$('#cover').css('height', document.body.clientHeight + 'px'); //设置遮罩层的⾼度为当前页⾯⾼度
}
// 关闭弹窗
function closeWindow() {
$('#showdiv').hide();  //隐藏弹窗
$('#cover').css('display', 'none');  //显⽰遮罩层
}
</script>
</html>
演⽰结果
源代码下载链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。