[snippet] show dialog

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_30632089

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量40

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/ipup/p/3791385.html

版权

/*! Copyright Cdialog
* version 1.0
* liscense MIT
*/

var Cdialog = {
		showMask: true,			//show mask
		isScroll:false,			//auto detect scroll
		zIndex: 1000,				//z-index of the mask
		scrollBar: 0,				//auto calc scrollbar width
		init: function(){
			
				$.ajaxSetup ({cache: false });	//disable ajax cache
				$(window).scrollTop(100);if($(window).scrollTop()){this.isScroll=true;$(window).scrollTop(0);}		//detect scroll
				
				if(this.isScroll){			//calc scrollbar width
					const scrollDiv = document.createElement("div");
					$(scrollDiv).width(100).height(100).css({"overflow-y":"scroll","position":"absolute","top":"-100px"});
					$("body").append(scrollDiv);
					this.scrollBar = 100-scrollDiv.clientWidth;
					$(scrollDiv).remove();
				}
				
				$("<div id='Cmodule'></div>").load("/common/common.html",function(e){$("body").append($(this));$(".Cclose").on("click",function(){$(".Cmask").trigger("click");$(this).parent().slideUp("fast");});});		//preload module
				},
		show: function(name){		//show module via element id
			var dialog = $("#"+name);
			if(name&&dialog.length){
				if(this.showMask){
					$(window).scrollLeft(0);	//reset scrollLeft value
					var mask = $("<div class=\"Cmask\"></div>");
							mask.css({"background":"#000","opacity":"0.5","filter":"alpha(opacity=50)","zIndex":this.zIndex,"position":"absolute","top":"0","left":"0"})
									.height("100%").width("100%")
									.appendTo($("body")).show().click(function(){
										$(this).fadeOut("fast",function(){$(this).remove();$("html").css("padding-right","0");bar.remove();$("body").css("overflow","auto");});
										dialog.slideUp("fast");
									});
									
					if(this.isScroll){		//fix content offset when isScroll, refer to Qzone
						$("html").css({"padding-right":this.scrollBar+"px"});
						bar = $("<div style='position:fixed;right:0;width:"+this.scrollBar+"px;height:100%;top:0;background:url(bg.jpg) repeat;z-index:"+(this.zIndex-1)+";'></div>");
						$("body").css("overflow","hidden").append(bar);
					}
					$("#Cmodule").width(dialog.width()).height(dialog.height()).css({"zIndex":this.zIndex+1,"position":this.showMask?"absolute":"fixed","top":"50%","left":"50%","marginTop":-dialog.height()/2+"px","marginLeft":-dialog.width()/2-this.scrollBar/2+"px"})
					dialog.show();
				}	
			}
		}
	}
$(function(){Cdialog.init()});

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
<style>
body{
	margin:0;
	padding:0;
	height:1500px;
	width:1000px;
	text-align:center;}
html{
	background:#FFF;}
</style>
</head>

<body>

<button οnclick="Cdialog.show('login');">Click</button>
</body>
</html>

转载于:https://www.cnblogs.com/ipup/p/3791385.html

weixin_30632089

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[snippet] show dialog

/*! Copyright Cdialog* version 1.0* liscense MIT*/var Cdialog = { showMask: true, //show mask isScroll:false, //auto detect scroll zIndex: 1000, //z-index of the mask ...
复制链接

扫一扫