/*! 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
时间： 2024-09-20 19:57:07