首页 > 代码库 > [snippet] show dialog
[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 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="http://www.mamicode.com/jquery-1.9.1.min.js"></script><script type="text/javascript" src="http://www.mamicode.com/js.js"></script><link rel="stylesheet" type="text/css" href="http://www.mamicode.com/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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。