原生态弹窗

   用惯了框架的弹出框，项目中让写原生的不能引用任何js的时候，突然就不知道如何下手了。下面是我整理的原生js代码，希望对大家有帮助。

html部分：

<button id="show" οnclick="isShow()">显示</button>

<div id="light" class="retrive">
    <h1 style=" text-align:center; font-size:20px;margin: 0px;">请输入支付密码</h1>
    <table style="margin-left: 54px;">
        <tr>
            <td>支付金额：<span style="margin-left: 10px;">52</span></td>
        </tr><br/>
        <tr>
            <td  align="center">
                输入密码: <input type="password"  id="pata"/>
            </td>

        </tr>
        <tr>
            <td align="center">
                <button type="button" id="Button2" οnclick="isHide()" class="btn">取消</button>&nbsp;&nbsp;
                <button type="button" οnclick="exportxc()" id="Button1" class="btn" style="background-color: palevioletred">支付</button>
            </td>
        </tr>
    </table>

</div>
<div id="fade" class="black_overlay"></div>

  

js代码部分：

<script>
    function isShow() {
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
        document.getElementById('hideall').style.display = 'none';

    }
    function isHide(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none';
        document.getElementById('hideall').style.display = 'block';
    }

</script>

style部分：

<style type="text/css" >
    .black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;  background-color: black;
        z-index:1001;  -moz-opacity: 0.8;  opacity:80;  filter: alpha(opacity=80);}
    .retrive{  display: none; position: absolute;  top: 25%; left: 35%;  width: 30%;  height: 20%;  padding: 16px;
        border: 1px solid #ccc;  background-color: white;  z-index:1100; overflow: hidden;  }
    #light{width: 400px;height: 180px;border-radius: 5px;}
    #pata{width: 170px;height: 18px;border-radius: 2px;border: 1px solid #ccc;margin-left: 10px;}
    #Button2,#Button1{margin-top: 22px;background-color: cornflowerblue;border: 1px solid #ccc;color: white;width: 75px;  height: 30px;font-size: 17px;border-radius: 3px;}
   
</style>

这是通过页面覆盖完成的，点击显示按钮后弹出框的实现效果为：