html js挺好的一个报警记录弹出窗

 

 

/*弹窗*/
.pop,.pop2,.pop3 {display: none;  width: 800px; min-height: 570px;  max-height: 750px;  height:570px;  position: absolute;  left: 0;  right: 0; margin:auto;  padding: 25px;  z-index: 130;  border-radius: 3px;  background-color: #23509a; border: #fff solid 1px;  box-shadow: 0 5px 18px rgba(100, 0, 0, .5);  }
.pop-top{ text-align: center; font-size: 20px; font-weight:bold; color: #ff6f05; height:40px;  width:100%; background: url(../images/line.png) no-repeat bottom center;}
.pop-top span{  float: right;  cursor: pointer; color: #fff; font-weight: bold; display:black}
.pop-foot{  height:50px;  line-height:50px;  width:100%;  border-top: 1px #5682dc solid;  text-align: right;  }
.pop-cancel{  padding:8px 15px;  margin:15px 5px;  border: none;  border-radius: 5px;  background-color: #ff6f05;  color: #fff;  cursor:pointer;  }
.pop-content{  height: 480px;}
.bgPop,.bgPop2,.bgPop3{  display: none;  position: absolute;  z-index: 129;  left: 0;  top: 0;  width: 100%;  height: 100%;  background: rgba(0,0,0,.2);}

    <!--遮罩层-->
        <div class="bgPop"></div>
        <!--弹出框-->
        <div class="pop">
            <div class="pop-top">
                报警记录
                <span class="pop-close">Ｘ</span>
            </div>
            <div class="pop-content">
                <table class="panel-table" bordercolor="#deefff" border="1">
                    <thead bgcolor="#971212" align="center">
                        <tr height="38">
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>

                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="pop-foot">
                <input type="button" value="确定" class="pop-cancel pop-close">
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('.pop-close').click(function () {
                    $('.bgPop,.pop').hide();
                });
                $('.click_pop').click(function () {
                    $('.bgPop,.pop').show();
                });
            })
        
        </script>

<!--遮罩层-->
        <div class="bgPop2"></div>
        <!--弹出框-->
        <div class="pop2">
            <div class="pop-top">
                历史记录
                <span class="pop-close">Ｘ</span>
            </div>
            <div class="pop-content">
                <table class="panel-table" bordercolor="#deefff" border="1">
                    <thead bgcolor="#10aaa5" align="center">
                        <tr height="38">
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr class="aaa" style="font-size: 16px;" align="center">
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="pop-foot">
                <input type="button" value="确定" class="pop-cancel pop-close">
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('.pop-close').click(function () {
                    $('.bgPop2,.pop2').hide();
                });
                $('.click_pop2').click(function () {
                    $('.bgPop2,.pop2').show();
                });
            })
        
        </script>
        <!--遮罩层-->
        <div class="bgPop3"></div>
        <!--弹出框-->
        <div class="pop3">
            <div class="pop-top">
                组态应用
                <span class="pop-close">Ｘ</span>
            </div>
            <div class="pop-content">
                组态应用
            </div>
            <div class="pop-foot">
                <input type="button" value="确定" class="pop-cancel pop-close">
            </div>
        </div>
        <script>
            $(document).ready(function() {
                $('.pop-close').click(function() {
                    $('.bgPop3,.pop3').hide();
                });
                $('.click_pop3').click(function() {
                    $('.bgPop3,.pop3').show();
                });
            })
        </script>