JQuery模拟boostrap模态框效果

来源：互联网发布：小数点的算法编辑：程序博客网时间：2024/06/16 19:48

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内容弹出

阅读全文

0 0