使用div和js脚本弹出对话框

本文主要是介绍使用div和js脚本弹出对话框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用div和js脚本弹出对话框

思路：div已经存在于网页当中，只是被隐藏了，当点击按钮时将其可见性设置为可见即可实现

实现：在网页中设置好需要弹出的窗口，为其他控件设置一个事件，当触发该事件时将窗口设置为可见

控件

<body class="bg" id="bg">
<!--窗口-->
<div class="div1" id="div1"><div id="div2" class="div2"><div class="divtitle" id="divtitle"><span class="title">欢迎使用</span><a class="closeimg" href="javascript:dispear()">x</a></div><img class="img" src="img/MyWechat.png"></div>
</div>
<!--按钮-->
<table style="margin: auto;text-align: center;width: 100%"><tr><td><button onmouseover="show()" onmouseleave="dispear()" class="btn">获得焦点显示窗口</button></td></tr><tr><td><button onclick="show()" class="btn">点击显示窗口</button></td></tr>
</table>
</body>

script 脚本

<script>//使窗口位置居中window.onresize = window.onload = window.onscroll = function () {center("div1");center("div2");center("divtitle")};function center(obj) {var div = document.getElementById(obj);div.style.top = (document.documentElement.clientHeight - div.offsetHeight) / 2 + "px";div.style.left = (document.documentElement.clientWidth - div.offsetWidth) / 2 + "px";}//显示窗口function show() {var div = document.getElementById("div1");var bg = document.getElementById("bg");bg.style.backgroundColor = "#ddd";bg.style.opacity = "0.9";div.style.visibility = "visible";}//隐藏窗口function dispear() {var div = document.getElementById("div1");var bg = document.getElementById("bg");bg.style.backgroundColor = "#fff";div.style.visibility = "hidden";}
</script>

css样式

<style type="text/css">.bg {width: 100%;height: 100%;}.div1 {visibility: hidden}.div2 {position: absolute;width: 300px;height: 350px;top: 40px;z-index: 2000;background-color: rgba(0, 0, 0, 0.1);border: 5px solid #ddd;opacity: 30}.divtitle {background-color: #f7f7f7;}.title {background: #f7f7f7;padding: 0px 20px;line-height: 50px;height: 40px;font-weight: bold;color: #666;font-size: 20px;}.closeimg {font-family: "Microsoft YaHei UI";font-size: 30px;color: #999;text-decoration: none;float: right;padding-right: 20px;line-height: 40px;}.img {width: 300px;height: 300px;}.btn {width: 300px;color: white;background: #4490f7;text-decoration: none;padding: 10px 95px;border-radius: 5px;font-family: "Microsoft YaHei UI";}
</style>