js模态窗口

最新推荐文章于 2024-07-10 14:03:37 发布

weixin_34259159

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量235

点赞数

文章标签： xhtml javascript python ViewUI

原文链接：https://my.oschina.net/u/555061/blog/485263

版权

2019独角兽企业重金招聘Python工程师标准>>>

用法是重点：

$('#modaltrigger').leanModal({ top: 310, overlay: 0.85, closeButton: ".hidemodal" });

这句话的意思就是id号为#modaltrigger的元素（比如一个div）点击后能触发模态窗口弹出，

如例子中所示：

<a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a>

注意这个href="#loginmodal"，这个是指向要显示于modal窗口上的那个div，

如例子所示：

<div id="loginmodal" style="display: none; position: fixed; opacity: 1; z-index: 11000; left: 50%; margin-left: -150px; top: 310px;">
    <h1>User Login</h1>
    <form id="loginform" name="loginform" method="post" action="index.html">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="txtfield" tabindex="1">
      
      <label for="password">Password:</label>
      <input type="password" name="password" id="password" class="txtfield" tabindex="2">
      
      <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
    </form>
  </div>

#loginmodal这个div原本

display: none

但是被注册到这个模态窗口以后当模态窗口触发的时候就会连同它一道显示，置为

display: block

然后#loginmodal会随着模态窗口的关闭重新

display: none

剩下的解释下参数：

top属性是该div距离顶部的距离，

overlay就是透明度，

closeButton就是标识另一个元素（这里就是带有.class为".hidemodal"的元素）能关闭该模态窗口，像这里的demo就是点击按钮就关闭模态窗口

另外本人还研究了另一项：

就是修改jquery.leanModal.min.js文件，

改为$("#lean_overlay").click(function(){/*close_modal(modal_id)*/});

这样能做什么呢？就是点击那个模态窗口它不会自动关闭，也就说必须要点击带有.class为".hidemodal"的元素才能关闭模态窗口，原来是点击模态窗口本身它自己就关闭了。

给一个完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>遮罩层</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../lib/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<button id="modaltrigger" href="#divSCA">点我</button>
	<div id="divSCA" style="width: 500px; height: 300px; border: 1px solid; display: none;">
		请选择信息类别
		<hr />
		<input id="chkSelect" type="checkbox" />全选
		<hr />
		<div style="height: 132px; width: 500px; "></div>
		<div>
			<input id="btnConfirmSCA" type="button" value="确定" /> <input
				id="btnCancelSCA" type="button" value="取消" />
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {

			$('#modaltrigger').leanModal({
				top : 310,
				overlay : 0.85,
				closeButton : "#btnConfirmSCA"
			});
		});
	</script>
</body>
</html>

demo里面有很多css是demo本身的css，经本人精简，如下：

style.css

/** modal window styles **/
#lean_overlay {
    position: fixed;
    z-index:999999;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
}

所以最后使用的时候就引入：

即可

后来发现这个jquery插件只是在PC页面上好使，在手机上不好使，为了能在cordova-hybrid上使用本人改造成了自己的jquery插件，如下，

jquery.myleanModal.min.js

// leanModal v1.0 by Yangxy
// Dual licensed under the MIT and GPL
/**
 * options参数对照：
 * var options = {
 *     top : 0,
 *     overlay : 0.5,
 *     closeButton : '#btnback',
 *     model : divJqueryObj,
 *     screenWidth : 320,
 *     screenHeight : 480
 * }
 * 1.top
 * 模态窗口内容体默认水平竖直同时居中的，这里的top为正负可以调整竖直方向的位置
 * 2.overlay
 * 模态窗口遮罩层的透明度
 * 3.closeButton
 * css选择器选择对象作为点击关闭该模态窗体事件的触发者
 * 4.model
 * 需要传入一个div的jquery引用对象，例如var divJqueryObj = $('<div id="divJqueryObj" style="width:256px;height:227px">...</div>');
 * 5.screenWidth/screenHeight
 * 由于android-hybrid模式下js获取不到真实的屏幕大小，因此需要主动传入参数，如果是PC浏览器则可以不需要此参数
 * 
 * 用法：
 * $('#demo').leanModal(options);
 * 其中demo为真实存在的任意元素
 */  


(function($) {
	$.fn.extend({
		leanModal : function(options) {
			var defaults = {
				top : 0,
				overlay : 0.5,
				closeButton : null
			};
			options = $.extend(defaults, options);
			var o = options;

			var overlay = $("<div id='lean_overlay'></div>");
			overlay.css({
				"position" : "fixed",
				"z-index" : "999998",
				"top" : "0px",
				"left" : "0px",
				"height" : "100%",
				"width" : "100%",
				"background" : "#000"
			});
			$("body").append(overlay);// 添加遮罩层

			var model = o.model;
			model.css({
				"position" : "fixed",
				"z-index" : "999999"
			});
			var screenWidth = o.screenWidth || $(window).width();
			var screenHeight = o.screenHeight || $(window).height();
			var top = (screenHeight - model.height()) / 2 - o.top;
			model.css("left", ((screenWidth - model.width()) / 2)
					+ "px");
			model.css("top", top + "px");
			$("body").append(model);// 添加内容层

			$("#lean_overlay").click(function() {//点击遮罩层关闭该模态窗体
				// overlay.remove();
				// model.remove();
			});
			$(o.closeButton).click(function() {
				model.remove();
				overlay.remove();
			});

			$("#lean_overlay").css({
				"display" : "block",
				opacity : 0
			});
			$("#lean_overlay").fadeTo(200, o.overlay);
		}
	})
})(jQuery);

用本人写的这个jquery插件不需要引入css，因为代码已经集成了，只需要引入jquery.myleanModal.min.js一个文件即可，本人写的这个jquery插件可以在mobile上用也可以在PC机上用，

用法：

var dialogGuanyu = $(
    "<div id='dialogGuanyu' style='width:258px;height:300px;'>" +
        "<img id='dialogGuanyu' src='../img/setup_icon_7.png' style='width:100%;height:100%;'>" +
	"</img>" +
    "</div>"
);
$('#guanyu').leanModal({
    top: 0,
    overlay: 0.25,
    closeButton: '#dialogGuanyu',
    model: dialogGuanyu,
    //screenWidth: 320,--如果是在PC浏览器上可以不写，但是android-hybrid上需要写
    //screenHeight: 480
});

注意：这个model对象（例如这里的dialogGuanyu）需要在style设置width和height

转载于:https://my.oschina.net/u/555061/blog/485263