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

来源:互联网 时间:1970-01-01

html5实现弹出提示框,并且伴随遮罩层并且可以关闭弹出框,有需要的朋友可以参考下。


<!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尝试一下

版权声明:本文为博主原创文章,未经博主允许不得转载。



相关阅读:
Top