html和js实现模态框

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 关闭模态框

      

      实现思路图：