html和js实现模态框

来源：互联网发布：raphael js 流程图编辑：程序博客网时间：2024/06/05 09:54

html和js实现模态框

web页面中经常会有在页面中弹出弹框，

显示信息或者在弹框中进行表单填写的需求。

实现效果如下：

实现思路：

Html+CSS

1.设置模态框的createteam_overlay为最为模态框包裹层，并设置初始化话CSS的visibility的属性为hidden,z-index设置为上层显示（大数字）

通过rgba设置背景色的透明度。

2.设置模态框createtream_data为createteam_overlay的相对元素

3.设置模态框关闭按钮。

JS:

1.点击我的战队时，createteam_overlay的visibility属性设置为visible

模态框显示后，点击其他区域不能关闭模态框。

2. 点击叉号时：createteam_overlay的visibility属性设置为hidden 关闭模态框

实现思路图：

实现代码：

Html:

   <div class="myterm">                        <div id="mytermimg" class="mytermimg">                            <img style="width: 120px;height: 40px" src="../images/personalPage/myteamimg1.png" />                        </div>                        <div class="clear"></div>                    </div>

  <div id="createtream_overlay" class="createtream_overlay">                <div class="createtream_data">                    <div id="cleanTream" class="treamTop"><img class="gamelogoimgtop" src="../images/common/clean01.png" /></div>                    <div class="clear"></div>                </div>            </div>

CSS:

.nav .createtream_overlay{    position: absolute;    height: 100%;    width:100%;    background: rgba(0,0,0,0.6);    visibility: hidden;    top: 0px;    z-index: 1000;    text-align:center;}.nav .createtream_overlay .createtream_data{    position: relative;    width:450px;    height: 450px;    margin: 150px auto;    background: #FEC06B;    opacity: 1;   /* 背景半透明 */    text-align:center;    z-index: 1001;}.nav .createtream_overlay .createtream_data .treamTop{    float: right;}

JS:

/*打开和关闭战队模态框*/    var mytermimg=document.getElementById("mytermimg");    var e1 = document.getElementById('createtream_overlay');    /* 开启模态框 */    mytermimg.onclick=function () {        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";    };    /* 关闭模态框 */    var cleanTream = document.getElementById('cleanTream');    cleanTream.onclick=function () {        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";    };

0 0