JQuery模拟boostrap模态框效果

1、单个模态框代码案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>单个模态框</title>
<meta name="description" content="简介">
<meta name="keywords" content="关键字">
<!--<script src="js/jquery-1.9.1.min.js"></script>-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style>*{ margin:0; padding:0;}.model { width:350px; height:300px; box-shadow:0 0 10px rgba(0,0,0,.4); border-radius:8px; padding:1em; padding-top:0; position:fixed; z-index:100;background-color:#fff; display:none;}.model-header {border-bottom:1px solid #eaeaea; height:35px; line-height:35px; text-align:center;}.close{ position:absolute; top:0; right:15px; height:35px; line-height:35px; text-align:center; display:block; color:#666; cursor:pointer;}.close:hover{ color:#A30D10;}.mask{ background-color:#000; width:100%; height:100%; opacity:.3; filter:alpha(opacity=30); position:absolute; left:0; top:0; z-index:0; display:none;}</style>
</head>
<body><div><a href="javascript:;" class="open">登陆</a></div><div class="model"><div class="model-header">  <h3>弹出标题</h3><span class="close">×</span> </div><div class="model-body">弹出内容 </div><div class="model-footer"></div></div><div class="mask"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
<script type="text/javascript">$(function(){$(".open").click(function(){showModel();});function showModel(){var wW=$(window).width();  //浏览器可视区域宽度和高度var wH=$(window).height();var oW=$(".model").innerWidth(); //获取类叫model的宽度和高度var oH=$(".model").innerHeight();$(".model").show().css({"top":(wH-oH)/2+"px","left":(wW-oW)/2+"px"});$(".mask").fadeIn();}$(window).resize(function(){if($(".model").is(":visible")){ //弹出框必须可见后 才能调用showModel()showModel();}});$(".close").click(function(){$(".model").hide();$(".mask").fadeOut();});$(document).keydown(function(ev){if(ev.keyCode==27){  //当按下键盘Esc时===》close关闭按钮
//              $(".model").hide();
//              $(".mask").fadeOut();$(".close").trigger("click");//trigger("事件名")  模拟事件}})});
</script>
</html>

效果图如下：点击登录后模态框出现，模态框随着窗口移动而移动（不是固定在页面）

2、多个模态框案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多个模态框</title>
<meta name="description" content="简介">
<meta name="keywords" content="关键字">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>*{ margin:0; padding:0;}.model{ width:350px; height:300px; box-shadow:0 0 10px rgba(0,0,0,.4); border-radius:8px; padding:1em; padding-top:0; position:fixed; z-index:100; background-color:#fff; display:none;}.model-header{border-bottom:1px solid #eaeaea; height:35px; line-height:35px; text-align:center;}.close{ position:absolute; top:0; right:15px; height:35px; line-height:35px; text-align:center; display:block; color:#666; cursor:pointer;}.close:hover{ color:#A30D10;}.mask{ background-color:#000; width:100%; height:100%; opacity:.3; filter:alpha(opacity=30); position:absolute; left:0; top:0; z-index:0; display:none;}
</style>
</head>
<body><div><a href = "javascript:;" class = "open" a = ".model1">注册1</a><a href = "javascript:;" class = "open" a = ".model2">登录2</a></div><div class="model model1"><div class="model-header"><h3>弹出标题</h3><span class="close">×</span> </div><div class="model-body">注册1 弹出内容 </div><div class="model-footer"></div></div><div class="model model2"><div class="model-header"><h3>弹出标题2</h3><span class="close">×</span> </div><div class="model-body">登录2 弹出内容</div><div class="model-footer"></div></div><div class="mask"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
<script type="text/javascript">$(function(){$(".open").click(function(){pop($(this));});function pop(b){var elem = $(b.attr("a"));  //$(".model1")  $(".model2")
//                       b.attr("a")  === >.model1  .model2showModel();function showModel(){var wW = $(window).width();  //浏览器可视区域宽度和高度var wH = $(window).height();var oW = elem.innerWidth();var oH = elem.innerHeight();elem.show().css({"top":(wH-oH)/2+"px","left":(wW-oW)/2+"px"});$(".mask").fadeIn();}$(window).resize(function(){showModel();});}$(".close").click(function(){$(".model").hide();$(".mask").fadeOut();});$(document).keydown(function(ev){if(ev.keyCode == 27){$(".close").trigger("click");//trigger("事件名")  模拟事件}});});
</script>
</html>

效果图如下：点击注册1，model1注册1内容弹出，点击登录2，model2登录2内容弹出

JQuery模拟boostrap模态框效果相关推荐

  1. Linux程序实现弹框,jQuery实现弹出框 效果绝对美观

    使用到JQeury写的几个比较好的Popup DialogBox,觉得不错.和大家分享下.使用它们结合.net可以实现很好的效果. 1.jqpopup: 是个可以拖拽,缩放并可以在它上面显示html页 ...

  2. html点击图片弹出模态框,JS实现图片点击后出现模态框效果

    JS实现图片点击后出现模态框效果 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了JS实现图片点击后出现模态框效果,编程之家小编觉得挺不错的 ...

  3. 超酷的模态框效果 - Nifty

    dreamweaver免费视频教程:http://www.51rgb.com/mproductzh.aspx?classid=31加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费 ...

  4. jQuery模拟下拉框单选框复选Select，Checkbox，Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们: 如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&q ...

  5. jQuery写简单模态框

    css代码 <style type="text/css">             body,div,a,p,span{                 margin: ...

  6. 基于JQuery 改造bootstrap模态框拖动功能

    看不爽现有的bootstrap拖动实现,自己也手痒,就自己写了一个拖动处理. PS:其他实现拖动方法 http://www.gbtags.com/gb/rtreplayerpreview/230.ht ...

  7. 23.模拟拖动登录框效果

    HTML部分:  <div class="login_div"> <a class="login" href="javascript ...

  8. jQuery 模态框

    使用原生jQuery编写一个模态框 实际上, 模态框就是一个大的div进行绝对定位,遮住本来的页面,使用户无法点击页面 以下粘一个代码 <!DOCTYPE html> <html l ...

  9. 来了老弟，帅气模态框

    这一期小编来分享一个小东西哈,它在编程中被我们称为弹出层! 弹出层相信大家都不陌生吧,可以顾名思义就是在页面弹出一个东西,什么东西呢? 弹出的那个东西我们叫它模态框! 总的来说呢就是弹出一个模态框来提 ...

最新文章

  1. 猪行天下之Python基础——7.1 文件存储
  2. 码农的祖宗是个妹子？！信不信由你！
  3. h5MYSQL并进行增删查改_mysql增删改查
  4. 00设计模式——指导规则
  5. Leetcode 217. 存在重复元素 解题思路及C++实现
  6. SpringBoot(1.5.6.RELEASE)源码解析(一)
  7. 全球及中国建筑农业及矿业电动车辆行业营销模式与需求规模预测报告2022版
  8. 2014公积金新政策对你买房有什么好处?
  9. hihocoder#1041 : 国庆出游（DFS）
  10. gulp加速hexo的yelee主题
  11. Linux压缩与解压常用命令
  12. js map遍历 修改对象里面的值_前端面试之你必须要懂的原生JS
  13. javascript毫秒计时器_JS制作计时器毫秒
  14. 恭喜 李星鹏 成为 Layotto Committer！
  15. Python的环境安装
  16. 为什么所有APP都想访问你的通讯录？
  17. Python版 孤勇者 | 画图+演奏+音乐可视化
  18. 软考的高级证书难考吗，难度大吗?
  19. 电脑每次重启总是会进行磁盘检查
  20. 使用Spring cloud框架完成中小信息化项目

热门文章

  1. python字典键值可以是元组或列表吗_Python列表、元组、字典、集合的内置使用方法...
  2. 更新计算机上的windows模块安装程序_Win10中用DOS命令也可以完成windows更新，这个技巧还真不知道...
  3. Elasticsearch7.X 字段数据类型
  4. SOA ESB 微服务 浅析
  5. linux搜索含多个字符串,关于linux:使用grep搜索多个字符串
  6. ORB-SLAM2代码思维导图
  7. ajax前端post请求json格式参数,前端js导出,参数以json格式发送post请求
  8. java web access_Java Web项目中连接Access数据库的配置方法
  9. linux 数据库 超出,[QAD]数据库超过2G，备份出现问题(linux)
  10. 笔记本电脑风扇声音大_笔记本风扇噪音太大？教你怎么降低笔记本风扇噪音