html5实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框

来源:互联网 发布:php在线手册 编辑:程序博客网 时间:2024/06/11 19:15
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/jquery-1.8.3.min.js"></script>    <style>        *{padding: 0; margin: 0}        .box{            position: fixed;            width: 100%;            height: 100%;            background: rgba(0,0,0,0.2);            display: none;        }        .box1{            width: 500px;            height: 500px;            position: fixed;left: 50%; top: 25%;            margin-left: -250px;            border: 1px solid #000000;        }    </style>    <script>     </script></head><body>    <div class="box">        <div class="box1">            <a href="javascript:;" onclick="jQuery('.box').hide()" class="close">关闭</a>        </div>    </div>    <a href="javascript:;" onclick="jQuery('.box').show()" class="show">显示</a></body></html>

1 1