制作div弹窗的遮盖层
制作div弹窗的遮盖层
leona_lily 发表于3年前
制作div弹窗的遮盖层
  • 发表于 3年前
  • 阅读 17
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 制作div弹窗的遮盖层 html jQuery
遮盖层的思想就是单独写一个div用于遮盖整个屏幕,设置z-index的值大一些就好,上面的弹窗就是一个div的显隐,只需要show的时候把这个div的z-index的值比遮盖层的值大一些就可以

可以使用的代码如下:

html:


<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>大前端jQuery弹出层效果 - 站长素材</title> <link rel="stylesheet" href="css/theme.css" media="all"> <script src="js/jquery.min.js"></script> <script> jQuery(document).ready(function($) { $('.theme-login').click(function(){ $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); }) $('.theme-poptit .close').click(function(){ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }) }) </script> </head> <body> <div class="theme-buy"> <a class="btn btn-primary btn-large theme-login" href="javascript:;">点我查看效果</a> </div> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <h3>登录 是一种态度</h3> </div> <div class="theme-popbod dform"> <form class="theme-signin" name="loginform" action="" method="post"> <ol> <li><h4>你必须先登录!</h4></li> <li><strong>用户名:</strong><input class="ipt" type="text" name="log" value="sc.chinaz.com" size="20" /></li> <li><strong>密码:</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li> <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li> </ol> </form> </div> </div> <div class="theme-popover-mask"></div> <div style="text-align:center;clear:both"><br><br><br><br><br><br><br><br><br> <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br> <p>来源:<a href="http://www.97zzw.com/" target="_blank">97站长网</a></p> </div> </body> </html>
css:

.theme-popover-mask { background: none repeat scroll 0 0 #000; display: none; height: 100%; left: 0; opacity: 0.4; position: fixed; top: 0; width: 100%; z-index: 9998; } //遮盖层css .theme-popover { background-color: #fff; border: 2px solid #666; border-radius: 5px; box-shadow: 0 0 10px #666; display: none; height: 360px; left: 50%; margin: -180px 0 0 -330px; position: fixed; top: 50%; width: 660px; z-index: 9999; } //弹窗css 





共有 人打赏支持
粉丝 8
博文 91
码字总数 37807
×
leona_lily
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: