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数组方法reverse()用法实例分析

    JS数组方法reverse()用法实例分析

    这篇文章主要介绍了JS数组方法reverse()用法,结合实例形式分析了JS数组reverse()方法基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • JS实现别踩白块游戏的示例代码

    JS实现别踩白块游戏的示例代码

    别踩白块是一款音乐类休闲游戏,游戏的玩法不难,只需跟着音乐的节奏点中对的方块即可。本文将用JavaScript实现这一经典游戏,感兴趣的可以了解一下
    2022-05-05
  • 一些手写JavaScript常用的函数汇总

    一些手写JavaScript常用的函数汇总

    这篇文章主要给大家介绍了一些手写的JavaScript常用的函数,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • JS实现DOM删除节点操作示例

    JS实现DOM删除节点操作示例

    这篇文章主要介绍了JS实现DOM删除节点操作,结合实例形式分析了javascript使用removeChild()操作页面dom节点删除功能的相关实现技巧,需要的朋友可以参考下
    2018-04-04
  • 这段js代码得节约你多少时间

    这段js代码得节约你多少时间

    这段js代码得节约你多少时间,学习js的朋友可以参考下。
    2011-12-12
  • layui表格 返回的数据状态异常的解决方法

    layui表格 返回的数据状态异常的解决方法

    今天小编就为大家分享一篇layui表格 返回的数据状态异常的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 原生JS获取URL链接参数的几种常见方法

    原生JS获取URL链接参数的几种常见方法

    这篇文章主要给大家介绍了关于利用原生JS获取URL链接参数的几种常见方法,文中通过实例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • webpack打包进度展示以及美化教程

    webpack打包进度展示以及美化教程

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),下面这篇文章主要给大家介绍了关于webpack打包进度展示以及美化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • JavaScript中Cookie操作实例

    JavaScript中Cookie操作实例

    这篇文章主要介绍了JavaScript中Cookie操作实例,本文先是讲解了Cookie的语法,然后给了实际操作实例,需要的朋友可以参考下
    2015-01-01
  • 鼠标拖拽移动子窗体的JS实现

    鼠标拖拽移动子窗体的JS实现

    这篇文章主要介绍了鼠标拖拽移动子窗体的JS实现,需要的朋友可以参考下
    2014-02-02

最新评论