js实现弹窗效果

这篇文章主要为大家详细介绍了js实现弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现弹窗效果的具体代码，供大家参考，具体内容如下

思路：

1.创建一个按钮，点击弹出弹窗
2.建立一个弹窗页面固定定位默认隐藏
3.将弹窗内容放在弹窗页面的中间
4.js将事件绑定按钮，点击后让弹窗页面显示
5.js事件绑定span标签，点击后让弹窗页面消失

代码如下

   弹窗    危险警告
×
 您将进入一个不安全的页面

CSS:

 #myModal{ display: none; position: fixed; z-index:1; left:0; top:0; width: 100%; height:100%; overflow: auto; background:rgba(0,0,0,0.5); } #myModal .modal{ width: 500px; height:300px; position: relative; top:50%; left:50%; margin-top: -150px; margin-left: -250px; animation:animate 1s; } .modal .modal-header{ height:50px; background:white; color: #000; line-height:50px; border-bottom: 1px solid #000000; } .modal .modal-header p{ display: inline-block; margin:0; position: absolute; left: 20px; } .modal .modal-header .close{ position: absolute; right:20px; font-size: 20px; cursor:pointer; } .modal .modal-content{ background: white; height:200px; text-align: center; line-height: 200px; } .modal .modal-content p{ margin:0; } .modal .modal-footer{ position: relative; height:50px; background: white; } /*添加动画*/ @keyframes animate{ from{top:0;opacity:0} to{top:50%;opacity:1} }

js：

 window.onload=function () { //获取弹窗按钮 var btn=document.getElementById("btn"); var close=document.getElementsByClassName("close")[0]; var myModal=document.getElementById("myModal"); //按钮绑定事件 btn.onclick=function () { //获取弹窗 myModal.style.display="block"; } close.onclick=function () { myModal.style.display="none"; } //用户点击其他地方关闭弹窗 window.onclick=function (event) { if(event.target ==myModal){ myModal.style.display="none"; } } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。

以上就是js实现弹窗效果的详细内容，更多请关注0133技术站其它相关文章！