js模態窗口

時間 2019-11-17

標籤模態窗口欄目 JavaScript 简体版

原文原文鏈接

用法是重點： javascript

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

這句話的意思就是id號爲#modaltrigger的元素（好比一個div）點擊後能觸發模態窗口彈出，html

如例子中所示：java

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

注意這個href="#loginmodal"，這個是指向要顯示於modal窗口上的那個div，android

如例子所示：瀏覽器

<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本來app

display: none

可是被註冊到這個模態窗口之後當模態窗口觸發的時候就會連同它一道顯示，置爲jquery插件

display: block

而後#loginmodal會隨着模態窗口的關閉從新ide

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。