Bootstrap Modal遮罩弹出层代码分享


Posted in Javascript onNovember 21, 2016

下面这段代码并非是Bootstrap的遮罩,只是简单版的遮罩效果,Bootstrap那个太??铝恕H绻?阒忧?ootstrap的那个遮罩,来看看这篇文章“完全版: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://3water.com/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遮罩弹出层代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
JS实现简单的九宫格抽奖
Jun 28 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 #Javascript
js学习之----深入理解闭包
Nov 21 #Javascript
浅谈js原生拖放
Nov 21 #Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 #Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 #Javascript
JS中判断null的方法分析
Nov 21 #Javascript
javascript 利用arguments实现可变长参数
Nov 21 #Javascript
You might like
10 个经典PHP函数
2013/10/17 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
详解javascript函数的参数
2015/11/10 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
django-csrf使用和禁用方式
2020/03/13 Python
详解Flask前后端分离项目案例
2020/07/24 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
校园门卫岗位职责
2013/12/09 职场文书
英语自荐信常用语句
2013/12/13 职场文书
优秀交警事迹材料
2014/01/26 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
简易版租房协议书范本
2014/10/13 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android