码迷,mamicode.com
首页 > 其他好文 > 详细

[snippet] show dialog

时间:2014-06-18 15:06:18      阅读:329      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   java   http   ext   

/*! 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(){
				$(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
			if(name){
				var dialog = $("#"+name);
				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);
					}
					
				}
				if(!dialog.length) alert("Initializing..."); else {
					$("#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 onclick="Cdialog.show(‘login‘);">Click</button>
</body>
</html>

 

[snippet] show dialog,布布扣,bubuko.com

[snippet] show dialog

标签:style   class   blog   java   http   ext   

原文地址:http://www.cnblogs.com/ipup/p/3791385.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!