html弹窗效果属性介绍,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-l