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 相关文章推荐
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
vue中@change兼容问题详解
Oct 25 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python程序慢的重要原因
2020/09/04 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
建筑工地宣传标语
2014/06/18 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
复兴之路展览观后感
2015/06/02 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
python在package下继续嵌套一个package
2022/04/14 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技