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

来源：互联网发布：android 网络编程编辑：程序博客网时间：2024/06/11 03:52

<!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: <a href="https://www.baidu.com/s?wd=500px&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPWbsuy7Bn1-WmvmYnWbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Rznjf4n1mvnWn3njDYnjfsPf" target="_blank" class="baidu-highlight">500px</a>;            height: <a href="https://www.baidu.com/s?wd=500px&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPWbsuy7Bn1-WmvmYnWbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Rznjf4n1mvnWn3njDYnjfsPf" target="_blank" class="baidu-highlight">500px</a>;            position: fixed;left: 50%; top: 25%;            <a href="https://www.baidu.com/s?wd=margin-left&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPWbsuy7Bn1-WmvmYnWbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1Rznjf4n1mvnWn3njDYnjfsPf" target="_blank" class="baidu-highlight">margin-left</a>: -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>

完全可以去掉href，这里只是个示例，完全可以用button代替，看自己的习惯，我这里用的是a标签

如何没有居中的话 可以吧fixed换成auto尝试一下

0 0