Bootstrap Modal遮罩弹出层代码分享

Bootstrap Modal遮罩弹出层代码分享

下面这段代码并非是Bootstrap的遮罩，只是简单版的遮罩效果，Bootstrap那个太啰嗦了。如果你钟情Bootstrap的那个遮罩，来看看这篇文章“完全版：Bootstrap弹出层遮罩”。

//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;

displahttp://y:none;

box-shadow: 0 0 10px #666;

}

jquery代码，点击出现，点击右上角关闭

jQuery(document).ready(function($) {

$('.theme-login').click(function(){xsVSsWt

$('.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遮罩弹出层代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。