Bootstrap Modal遮罩弹出层代码分享
更新时间:2016年11月21日 11:14:52 作者:my98800
本文给大家分享的这段代码并非是Bootstrap的遮罩,只是简单版的遮罩效果,对bootstrap modal 遮罩效果感兴趣的朋友可以参考下本文
下面这段代码并非是Bootstrap的遮罩,只是简单版的遮罩效果,Bootstrap那个太啰嗦了。如果你钟情Bootstrap的那个遮罩,来看看这篇文章“完全版:Bootstrap弹出层遮罩”。
<div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:void(0);" 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="lanrenzhijia" 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>
via重要的CSS,里面的内容样式可以根据自己需求修改:原文来自:https://www.jb51.net/article/97841.htm
//code from http://caibaojian.com/bootstrap-modal.html .theme-popover-mask { z-index: 9998; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.4; filter:alpha(opacity=40); display:none } .theme-popover { z-index:9999; position:fixed; top:50%; left:50%; width:660px; height:360px; margin:-180px 0 0 -330px; border-radius:5px; border:solid 2px #666; background-color:#fff; display:none; box-shadow: 0 0 10px #666; }
jQuery代码,点击出现,点击右上角关闭
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); }) })
以上所述是小编给大家介绍的Bootstrap Modal遮罩弹出层代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
这篇文章主要介绍了JS Html转义和反转义(html编码和解码)的实现与使用方法,结合实例形式总结分析了JS Html转义和反转义、html编码和解码相关封装类定义与具体使用技巧,需要的朋友可以参考下2020-03-03Document.body.scrollTop的值总为零的快速解决办法
这篇文章主要介绍了Document.body.scrollTop的值总为零的解决方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下2016-06-06
最新评论