弹窗js实例
2009-10-22 19:48
183 查看
<!doctype html>
<title>一步步教你实现弹出窗口 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="一步步教你实现弹出窗口 by 司徒正美" />
<meta name="description" content="一步步教你实现弹出窗口 by 司徒正美" />
<script type="text/javascript">
var Dialog = function(){
var options = arguments[0] || {};
this.title = options.title || "新窗口",
this.width = options.width || 400,
this.height = options.height || 300,
this.container = document.createElement("div"),
this.id = "id" + Math.abs(new Date() * Math.random()).toFixed(0);
this.init();
}
Dialog.prototype = {
constructor: Dialog,
init: function() {
var me = this,container = me.container,width = me.width, height = me.height,
id = me.id,builder = [],t = "getElementsByTagName",
bg = function(pic){
var bgcolor = arguments[1] || 'transparent',
left = arguments[2] || 'left',
s = 'background:'+bgcolor + ' url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/'
+ pic + ') no-repeat '+left+' center;';
return s;
};
if(typeof Dialog.z === "undefined"){
Dialog.zIndex = 999;
}
document.body.insertBefore(container,null);
container.id = id;
container.className = "popups";
builder.push('<div class="caption">'+me.title+'</div>');
builder.push('<form><div class="replaceable"></div>');
builder.push('<div class="submitable">');
builder.push('<a class="negative" href="javascript:void(0)">取消</a>');
builder.push('<a class="positive" href="javascript:void(0)">确认</a>');
builder.push('</div></form>');
builder.push('<a class="closebtn" href="javascript:void(0)"></a>');
container.innerHTML = builder.join('');
var size = me.getBrowserWindowSize();
me.left = ((size.width - width)/2) >> 0;
me.top = ((size.height - height)/2) >> 0;
me.ie6 = /msie|MSIE 6/.test(navigator.userAgent);
var divs = container[t]("div"),k = divs.length;
while (--k >= 0) {
if(divs[k].className == "replaceable"){
me.content = divs[k]
break;
}
}
//设置样式
me.css(".popups","position:absolute;width:"+width+"px;height:"+
height+"px;left:"+me.left+"px;top:"+me.top+"px;");//background:#68DFFB
container.style.zIndex = Dialog.zIndex++;
me.css(".popups .caption",'position:absolute;top:10px;left:10px;width:'+(width-50)+'px;height:20px;'+
'padding-left:30px;font:700 14px/20px "SimSun","Times New Roman";color: #fff;'+
bg("o_icon.gif","#68DFFB","5px"));
me.css(".popups .closebtn",'position:absolute;top:0;right:10px;display:block;width:28px; '+
'height:17px;text-decoration:none;'+ bg("o_dialog_closebtn.gif"));
me.css(".popups a.closebtn:hover",bg("o_dialog_closebtn_over.gif"));
me.css(".popups form","position:absolute;top:30px;left:10px;border:3px solid #68DFFB;width:"+(width-26)+"px;height:"+(height-51)+"px;background:#fff;");
me.css(".popups .submitable","position:absolute;bottom:0;border-top:1px solid #c0c0c0;width:100%;height:40px;background:#f9f9f9;");
var buttoncss = 'display:block;float:right;margin: 0.7em 0.5em;padding:2px 7px;border:1px solid #dedede;'
+ 'background:#f5f5f5;color:#a9ea00;font:700 12px/130% "SimSun","Times New Roman";text-decoration:none;';
me.css("a.positive",buttoncss);//IE6有bug，不能动态创建联合选择器
me.css("a.negative",buttoncss);
me.css("a.negative","color:#ff5e00;");
me.css("a.positive:hover","border:1px solid #E6EFC2;background:#E6EFC2;color:#529214;");
me.css("a.negative:hover","border:1px solid #fbe3e4;background:#fbe3e4;color:#d12f19;");
me.css("a.positive:active","border:1px solid #529214;background:#529214;color:#fff;");
me.css("a.negative:active","border:1px solid #d12f19;background:#d12f19;color:#fff;");
me.css("a","outline: 0;");
//按钮的圆角
var ff = /a/[-1]=='a';
if(ff){
me.css("a.positive","-moz-border-radius:4px;");
me.css("a.negative","-moz-border-radius:4px;");
}else{
me.css("a.positive","-webkit-border-radius:4px;");
me.css("a.negative","-webkit-border-radius:4px;");
}
//***************************
if (!+"/v1" ){
if(!document.namespaces.vml){
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
var vmlobj = document.createElement("<object classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E id=VMLRender>"),
head = document.getElementsByTagName("head")[0];
head.appendChild(vmlobj);
document.createStyleSheet().addRule(".vml", "behavior: url(#VMLRender); display:inline-block;");
}
var rect = document.createElement('<vml:roundrect class="vml">');
container.insertBefore(rect,container.firstChild);
rect.style.cssText = "position:absolute;top:0px;left:0px;width:"+width+"px;height:"+height+"px;";
me.attr(rect,{arcsize:5 /Math.min(width, height),stroked:"f"});
rect.innerHTML = '<vml:fill class="vml" opacity="0.8" color="#68DFFB" />' +
'<vml:shadow class="vml" on="t" color="#333" opacity="0.2" offset="10px,10px" />'
}else{
var svg = me.createSVG("svg");
container.insertBefore(svg,container.firstChild);
me.attr(svg,{width:me.width+10+"px",height:me.height+10+"px"});
var defs = me.createSVG("defs");
svg.appendChild(defs);
var filter = me.createSVG("filter");
defs.appendChild(filter);
me.attr(filter,{id:"filter"+id});
var feGaussianBlur = me.createSVG("feGaussianBlur");
filter.appendChild(feGaussianBlur)
me.attr(feGaussianBlur,{"in":"SourceAlpha",result:"blur-out",stdDeviation:1.5});
var feOffset = me.createSVG("feOffset");
filter.appendChild(feOffset)
me.attr(feOffset,{"in":"blur-out",result:"the-shadow",dx:0,dy:2});
var feBlend = me.createSVG("feBlend");
filter.appendChild(feBlend)
me.attr(feBlend,{"in":"SourceGraphic","in2":"the-shadow",mode:"normal"});
var shadow = me.createSVG("rect");
svg.appendChild(shadow);
me.attr(shadow,{x:"10px",y:"10px",width:me.width+"px",height:me.height+"px",rx:10,
fill:"#333",style:"opacity:0.2",filter:"url(#filter"+id+")"});
var rect = me.createSVG("rect");
svg.appendChild(rect);
me.attr(rect,{width:me.width+"px",height:me.height+"px",rx:5,fill:"#68DFFB",style:"opacity:0.8"});
}
//***************************IE6 弹出窗口中遮不住select******************************
if(me.ie6){
me.iframe = document.createElement("<iframe style='position:absolute;left:"+
me.left+"px;top:"+me.top+"px;width:"+(me.width+10)+"px;height:"+
(me.height+10)+"px;z-index:"+(Dialog.zIndex-2)+";filter:mask();display:none;' ></iframe>");
container.insertAdjacentElement('beforeBegin',me.iframe);
}
//*****************************监听点击**************************
container.onclick = function(){
var ee = me.getEvent(), node = ee[1],tag = ee[2];
if(tag == "a" ){
switch(node.className){
case "closebtn" :
me.hide();
break;
case "positive" :
me.hide();
//form.submit();
break;
case "negative" :
alert("你点击了取消按钮!");
break;
}
}
}
container.onmousedown = function(e){
e = e || window.event;
container.offset_x = e.clientX - container.offsetLeft;
container.offset_y = e.clientY - container.offsetTop;
document.onmousemove = function(e){
me.drag(e,me)
}
document.onmouseup = function(){
me.dragend(container)
}
}
},
drag:function(e,me){
e = e || window.event;//获得事件对象
var el = me.container;
var l = e.clientX - el.offset_x + "px",
t = e.clientY - el.offset_y + "px";
with(el.style){
left=l;
top=t;
cursor="move"
}
if(me.ie6){
with(me.iframe.style){
left=l;
top=t;
}
}
!+"/v1"? document.selection.empty() : window.getSelection().removeAllRanges();
},
dragend:function(el){
el.style.cursor = "";
document.onmouseup = document.onmousemove = null;
},
hide : function(){
this.container.style.display = "none" ;
if(this.ie6){
this.iframe.style.display = "none";
}
this.mode(0,0);
//下面两行目的是生成 html,body{width:auto;height:auto;overflow:auto;}
this.incss(document.body, {width:"auto",height:"auto",overflow:"auto"});
this.incss(document.documentElement, {width:"auto",height:"auto",overflow:"auto"});
},
show : function(){
this.container.style.display = "block" ;
if(this.ie6){
this.iframe.style.display = "block";
}
var size = this.getBrowserWindowSize();
this.mode(size.width, size.height);
},
getBrowserWindowSize :function(){
var de = document.documentElement;
return {
width: (de.clientWidth || document.body.clientWidth),
height:(de.clientHeight || document.body.clientHeight)
}
},
createSVG : function(tag){
return document.createElementNS("http://www.w3.org/2000/svg",tag);
},
attr: function(node,bag){
for(var i in bag){
if(bag.hasOwnProperty(i))
node.setAttribute(i,bag[i])
}
},
getEvent : function(e) {
e = e || window.event;
if (!e) {
var c = this.getEvent.caller;
while (c) {
e = c.arguments[0];
if (e && (Event == e.constructor || MouseEvent == e.constructor)) {
break;
}
c = c.caller;
}
}
var target = e.srcElement ? e.srcElement : e.target,
currentN = target.nodeName.toLowerCase(),
parentN = target.parentNode.nodeName.toLowerCase(),
grandN = target.parentNode.parentNode.nodeName.toLowerCase();
return [e,target,currentN,parentN,grandN];
},
mode:function(w,h){
var mask = Dialog.mask,me = this;
this.incss(document.body, {width:"100%",height:"100%",overflow:"hidden"});
this.incss(document.documentElement, {width:"100%",height:"100%",overflow:"hidden"});
this.incss(mask,{position:"absolute",background:"#fff",top:0,left:0,
width:w +"px",height:h +"px","-moz-user-select":"none"});
!+"/v1"? (mask.style.filter = "alpha(opacity=0)") : (mask.style.opacity = "0");
mask.onselectstart = function(e){
me.stopEvent(e);
}
mask.oncontextmenu = function(e){
me.stopEvent(e);
}
},
stopEvent:function(e){
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
},
incss:function(node,bag){
var str = ";"
for(var i in bag){
if(bag.hasOwnProperty(i))
str += i+":"+bag[i]+";"
}
node.style.cssText = str;
},
css:function(selector,declaration){
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet() {
var element = document.createElement('style');
element.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = function(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
};
return sheet;
}
return createStyleSheet;
})();
}
if(!!Dialog.sheet){
if(!Dialog.memory.exists(selector,declaration)){
Dialog.memory.set(selector,declaration);
Dialog.sheet.addRule(selector,declaration);
}
}else{
Dialog.sheet = document.createStyleSheet();
var memory = function(){
var keys = [],values = [],size = 0;
return {
get : function(k){
var results = [];
for(var i=0,l=keys.length;i<l;i++){
if(keys[i] == k){
results.push(values[i])
}
}
return results;
},
exists:function(k,v){
var vs = this.get(k);
for(var i=0,l=vs.length;i<l;i++){
if(vs[i] == v)
return true;
}
return false;
},
set : function(k,v){
keys.push(k);
values.push(v);
size++;
},
length :function(){
return size;
}
}
}
Dialog.memory = memory();
Dialog.memory.set(selector,declaration);
Dialog.sheet.addRule(selector,declaration);
Dialog.mask = document.createElement("div");
document.body.insertBefore(Dialog.mask,this.container);
}
}
};
window.onload = function(){
var dialog1,dialog2,dialog3
setTimeout(function(){ //定时器是为了能在我运行框中正常运行，项目中没有必须放到里面去！
dialog1 = new Dialog({width:400,height:300,title:"司徒正美"});
dialog1.hide();
dialog2 = new Dialog({width:400,height:300,title:"司徒正美"});
dialog2.hide();
dialog3 = new Dialog({width:400,height:300,title:"司徒正美"});
dialog3.hide();
},0)
var bn1 = document.getElementById("test1"),
bn2 = document.getElementById("test2"),
bn3 = document.getElementById("test3");
bn1.onclick = function(){
dialog1.show();
dialog1.content.innerHTML = "<table width="+(dialog1.width-26)+" height="+
(dialog1.height-56)+"><tr><td style='text-align:center;'>文字居中</td></tr></table>"
}
bn2.onclick = function(){
dialog2.show();
dialog2.content.innerHTML = "<iframe frameborder=0 src='http://www.csszengarden.com/' width="+(dialog2.width-26)+" height="+
(dialog2.height-96)+"></iframe>"
};
bn3.onclick = function(){
dialog3.show();
dialog3.content.innerHTML = "<table width="+(dialog3.width-26)+" height="+
(dialog3.height-96)+"><tr><td style='text-align:center;'>" + document.getElementById("hide").innerHTML +
"</td></tr></table>"
}
}
</script>
<h2 style="text-align:center">一步步教你实现弹出窗口 by 司徒正美</h2>
<pre>
#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}
box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。
在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：
div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}
</pre>
<select name="select1">
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
</select>
<select name="select1">
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
</select>
<p>我的博客:http://www.cnblogs.com/rubylouvre/</p>
<button id="test1">弹出窗口1</button>
<button id="test2">弹出窗口2（带iframe）</button>
<button id="test3">弹出窗口3（引用本页的隐藏层）</button>
<div style="display:none" id="hide">
<center style="padding:1em;font-weight:700">用户登陆</center>
<p>
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">密 码</label>
<input type="password" name="password" id="password" />
</p>
</div>
<title>一步步教你实现弹出窗口 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="一步步教你实现弹出窗口 by 司徒正美" />
<meta name="description" content="一步步教你实现弹出窗口 by 司徒正美" />
<script type="text/javascript">
var Dialog = function(){
var options = arguments[0] || {};
this.title = options.title || "新窗口",
this.width = options.width || 400,
this.height = options.height || 300,
this.container = document.createElement("div"),
this.id = "id" + Math.abs(new Date() * Math.random()).toFixed(0);
this.init();
}
Dialog.prototype = {
constructor: Dialog,
init: function() {
var me = this,container = me.container,width = me.width, height = me.height,
id = me.id,builder = [],t = "getElementsByTagName",
bg = function(pic){
var bgcolor = arguments[1] || 'transparent',
left = arguments[2] || 'left',
s = 'background:'+bgcolor + ' url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/'
+ pic + ') no-repeat '+left+' center;';
return s;
};
if(typeof Dialog.z === "undefined"){
Dialog.zIndex = 999;
}
document.body.insertBefore(container,null);
container.id = id;
container.className = "popups";
builder.push('<div class="caption">'+me.title+'</div>');
builder.push('<form><div class="replaceable"></div>');
builder.push('<div class="submitable">');
builder.push('<a class="negative" href="javascript:void(0)">取消</a>');
builder.push('<a class="positive" href="javascript:void(0)">确认</a>');
builder.push('</div></form>');
builder.push('<a class="closebtn" href="javascript:void(0)"></a>');
container.innerHTML = builder.join('');
var size = me.getBrowserWindowSize();
me.left = ((size.width - width)/2) >> 0;
me.top = ((size.height - height)/2) >> 0;
me.ie6 = /msie|MSIE 6/.test(navigator.userAgent);
var divs = container[t]("div"),k = divs.length;
while (--k >= 0) {
if(divs[k].className == "replaceable"){
me.content = divs[k]
break;
}
}
//设置样式
me.css(".popups","position:absolute;width:"+width+"px;height:"+
height+"px;left:"+me.left+"px;top:"+me.top+"px;");//background:#68DFFB
container.style.zIndex = Dialog.zIndex++;
me.css(".popups .caption",'position:absolute;top:10px;left:10px;width:'+(width-50)+'px;height:20px;'+
'padding-left:30px;font:700 14px/20px "SimSun","Times New Roman";color: #fff;'+
bg("o_icon.gif","#68DFFB","5px"));
me.css(".popups .closebtn",'position:absolute;top:0;right:10px;display:block;width:28px; '+
'height:17px;text-decoration:none;'+ bg("o_dialog_closebtn.gif"));
me.css(".popups a.closebtn:hover",bg("o_dialog_closebtn_over.gif"));
me.css(".popups form","position:absolute;top:30px;left:10px;border:3px solid #68DFFB;width:"+(width-26)+"px;height:"+(height-51)+"px;background:#fff;");
me.css(".popups .submitable","position:absolute;bottom:0;border-top:1px solid #c0c0c0;width:100%;height:40px;background:#f9f9f9;");
var buttoncss = 'display:block;float:right;margin: 0.7em 0.5em;padding:2px 7px;border:1px solid #dedede;'
+ 'background:#f5f5f5;color:#a9ea00;font:700 12px/130% "SimSun","Times New Roman";text-decoration:none;';
me.css("a.positive",buttoncss);//IE6有bug，不能动态创建联合选择器
me.css("a.negative",buttoncss);
me.css("a.negative","color:#ff5e00;");
me.css("a.positive:hover","border:1px solid #E6EFC2;background:#E6EFC2;color:#529214;");
me.css("a.negative:hover","border:1px solid #fbe3e4;background:#fbe3e4;color:#d12f19;");
me.css("a.positive:active","border:1px solid #529214;background:#529214;color:#fff;");
me.css("a.negative:active","border:1px solid #d12f19;background:#d12f19;color:#fff;");
me.css("a","outline: 0;");
//按钮的圆角
var ff = /a/[-1]=='a';
if(ff){
me.css("a.positive","-moz-border-radius:4px;");
me.css("a.negative","-moz-border-radius:4px;");
}else{
me.css("a.positive","-webkit-border-radius:4px;");
me.css("a.negative","-webkit-border-radius:4px;");
}
//***************************
if (!+"/v1" ){
if(!document.namespaces.vml){
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
var vmlobj = document.createElement("<object classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E id=VMLRender>"),
head = document.getElementsByTagName("head")[0];
head.appendChild(vmlobj);
document.createStyleSheet().addRule(".vml", "behavior: url(#VMLRender); display:inline-block;");
}
var rect = document.createElement('<vml:roundrect class="vml">');
container.insertBefore(rect,container.firstChild);
rect.style.cssText = "position:absolute;top:0px;left:0px;width:"+width+"px;height:"+height+"px;";
me.attr(rect,{arcsize:5 /Math.min(width, height),stroked:"f"});
rect.innerHTML = '<vml:fill class="vml" opacity="0.8" color="#68DFFB" />' +
'<vml:shadow class="vml" on="t" color="#333" opacity="0.2" offset="10px,10px" />'
}else{
var svg = me.createSVG("svg");
container.insertBefore(svg,container.firstChild);
me.attr(svg,{width:me.width+10+"px",height:me.height+10+"px"});
var defs = me.createSVG("defs");
svg.appendChild(defs);
var filter = me.createSVG("filter");
defs.appendChild(filter);
me.attr(filter,{id:"filter"+id});
var feGaussianBlur = me.createSVG("feGaussianBlur");
filter.appendChild(feGaussianBlur)
me.attr(feGaussianBlur,{"in":"SourceAlpha",result:"blur-out",stdDeviation:1.5});
var feOffset = me.createSVG("feOffset");
filter.appendChild(feOffset)
me.attr(feOffset,{"in":"blur-out",result:"the-shadow",dx:0,dy:2});
var feBlend = me.createSVG("feBlend");
filter.appendChild(feBlend)
me.attr(feBlend,{"in":"SourceGraphic","in2":"the-shadow",mode:"normal"});
var shadow = me.createSVG("rect");
svg.appendChild(shadow);
me.attr(shadow,{x:"10px",y:"10px",width:me.width+"px",height:me.height+"px",rx:10,
fill:"#333",style:"opacity:0.2",filter:"url(#filter"+id+")"});
var rect = me.createSVG("rect");
svg.appendChild(rect);
me.attr(rect,{width:me.width+"px",height:me.height+"px",rx:5,fill:"#68DFFB",style:"opacity:0.8"});
}
//***************************IE6 弹出窗口中遮不住select******************************
if(me.ie6){
me.iframe = document.createElement("<iframe style='position:absolute;left:"+
me.left+"px;top:"+me.top+"px;width:"+(me.width+10)+"px;height:"+
(me.height+10)+"px;z-index:"+(Dialog.zIndex-2)+";filter:mask();display:none;' ></iframe>");
container.insertAdjacentElement('beforeBegin',me.iframe);
}
//*****************************监听点击**************************
container.onclick = function(){
var ee = me.getEvent(), node = ee[1],tag = ee[2];
if(tag == "a" ){
switch(node.className){
case "closebtn" :
me.hide();
break;
case "positive" :
me.hide();
//form.submit();
break;
case "negative" :
alert("你点击了取消按钮!");
break;
}
}
}
container.onmousedown = function(e){
e = e || window.event;
container.offset_x = e.clientX - container.offsetLeft;
container.offset_y = e.clientY - container.offsetTop;
document.onmousemove = function(e){
me.drag(e,me)
}
document.onmouseup = function(){
me.dragend(container)
}
}
},
drag:function(e,me){
e = e || window.event;//获得事件对象
var el = me.container;
var l = e.clientX - el.offset_x + "px",
t = e.clientY - el.offset_y + "px";
with(el.style){
left=l;
top=t;
cursor="move"
}
if(me.ie6){
with(me.iframe.style){
left=l;
top=t;
}
}
!+"/v1"? document.selection.empty() : window.getSelection().removeAllRanges();
},
dragend:function(el){
el.style.cursor = "";
document.onmouseup = document.onmousemove = null;
},
hide : function(){
this.container.style.display = "none" ;
if(this.ie6){
this.iframe.style.display = "none";
}
this.mode(0,0);
//下面两行目的是生成 html,body{width:auto;height:auto;overflow:auto;}
this.incss(document.body, {width:"auto",height:"auto",overflow:"auto"});
this.incss(document.documentElement, {width:"auto",height:"auto",overflow:"auto"});
},
show : function(){
this.container.style.display = "block" ;
if(this.ie6){
this.iframe.style.display = "block";
}
var size = this.getBrowserWindowSize();
this.mode(size.width, size.height);
},
getBrowserWindowSize :function(){
var de = document.documentElement;
return {
width: (de.clientWidth || document.body.clientWidth),
height:(de.clientHeight || document.body.clientHeight)
}
},
createSVG : function(tag){
return document.createElementNS("http://www.w3.org/2000/svg",tag);
},
attr: function(node,bag){
for(var i in bag){
if(bag.hasOwnProperty(i))
node.setAttribute(i,bag[i])
}
},
getEvent : function(e) {
e = e || window.event;
if (!e) {
var c = this.getEvent.caller;
while (c) {
e = c.arguments[0];
if (e && (Event == e.constructor || MouseEvent == e.constructor)) {
break;
}
c = c.caller;
}
}
var target = e.srcElement ? e.srcElement : e.target,
currentN = target.nodeName.toLowerCase(),
parentN = target.parentNode.nodeName.toLowerCase(),
grandN = target.parentNode.parentNode.nodeName.toLowerCase();
return [e,target,currentN,parentN,grandN];
},
mode:function(w,h){
var mask = Dialog.mask,me = this;
this.incss(document.body, {width:"100%",height:"100%",overflow:"hidden"});
this.incss(document.documentElement, {width:"100%",height:"100%",overflow:"hidden"});
this.incss(mask,{position:"absolute",background:"#fff",top:0,left:0,
width:w +"px",height:h +"px","-moz-user-select":"none"});
!+"/v1"? (mask.style.filter = "alpha(opacity=0)") : (mask.style.opacity = "0");
mask.onselectstart = function(e){
me.stopEvent(e);
}
mask.oncontextmenu = function(e){
me.stopEvent(e);
}
},
stopEvent:function(e){
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
},
incss:function(node,bag){
var str = ";"
for(var i in bag){
if(bag.hasOwnProperty(i))
str += i+":"+bag[i]+";"
}
node.style.cssText = str;
},
css:function(selector,declaration){
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet() {
var element = document.createElement('style');
element.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = function(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
};
return sheet;
}
return createStyleSheet;
})();
}
if(!!Dialog.sheet){
if(!Dialog.memory.exists(selector,declaration)){
Dialog.memory.set(selector,declaration);
Dialog.sheet.addRule(selector,declaration);
}
}else{
Dialog.sheet = document.createStyleSheet();
var memory = function(){
var keys = [],values = [],size = 0;
return {
get : function(k){
var results = [];
for(var i=0,l=keys.length;i<l;i++){
if(keys[i] == k){
results.push(values[i])
}
}
return results;
},
exists:function(k,v){
var vs = this.get(k);
for(var i=0,l=vs.length;i<l;i++){
if(vs[i] == v)
return true;
}
return false;
},
set : function(k,v){
keys.push(k);
values.push(v);
size++;
},
length :function(){
return size;
}
}
}
Dialog.memory = memory();
Dialog.memory.set(selector,declaration);
Dialog.sheet.addRule(selector,declaration);
Dialog.mask = document.createElement("div");
document.body.insertBefore(Dialog.mask,this.container);
}
}
};
window.onload = function(){
var dialog1,dialog2,dialog3
setTimeout(function(){ //定时器是为了能在我运行框中正常运行，项目中没有必须放到里面去！
dialog1 = new Dialog({width:400,height:300,title:"司徒正美"});
dialog1.hide();
dialog2 = new Dialog({width:400,height:300,title:"司徒正美"});
dialog2.hide();
dialog3 = new Dialog({width:400,height:300,title:"司徒正美"});
dialog3.hide();
},0)
var bn1 = document.getElementById("test1"),
bn2 = document.getElementById("test2"),
bn3 = document.getElementById("test3");
bn1.onclick = function(){
dialog1.show();
dialog1.content.innerHTML = "<table width="+(dialog1.width-26)+" height="+
(dialog1.height-56)+"><tr><td style='text-align:center;'>文字居中</td></tr></table>"
}
bn2.onclick = function(){
dialog2.show();
dialog2.content.innerHTML = "<iframe frameborder=0 src='http://www.csszengarden.com/' width="+(dialog2.width-26)+" height="+
(dialog2.height-96)+"></iframe>"
};
bn3.onclick = function(){
dialog3.show();
dialog3.content.innerHTML = "<table width="+(dialog3.width-26)+" height="+
(dialog3.height-96)+"><tr><td style='text-align:center;'>" + document.getElementById("hide").innerHTML +
"</td></tr></table>"
}
}
</script>
<h2 style="text-align:center">一步步教你实现弹出窗口 by 司徒正美</h2>
<pre>
#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}
box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。
在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：
div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}
</pre>
<select name="select1">
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
</select>
<select name="select1">
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
<option>不要挡住我，不要挡住我</option>
</select>
<p>我的博客:http://www.cnblogs.com/rubylouvre/</p>
<button id="test1">弹出窗口1</button>
<button id="test2">弹出窗口2（带iframe）</button>
<button id="test3">弹出窗口3（引用本页的隐藏层）</button>
<div style="display:none" id="hide">
<center style="padding:1em;font-weight:700">用户登陆</center>
<p>
<label for="username">用户名</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">密 码</label>
<input type="password" name="password" id="password" />
</p>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现弹窗插件功能实例代码分享
- JS自动适应的图片弹窗实例
- JS自动适应的图片弹窗实例
- JSDOM编程艺术-笔记-ch5 平稳退化&分离JS（BY 弹窗实例）
- 纯js的右下角弹窗实例
- 原生JS可拖动弹窗效果实例代码
- 原生JS可拖动弹窗效果实例代码
- js实现弹窗居中的简单实例
- js实现弹窗插件功能实例代码分享
- JS JSONP跨域请求实例详解
- WebStrom js文件创建 template 模板实例
- js判断某个字符出现的次数的简单实例
- JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
- knockout.js实例二~购物车
- js判断页面中是否有指定控件的简单实例
- 弹窗开关js
- js判断浏览器类型,版本的代码(附多个实例代码)
- JS简单实例之背景颜色变换
- prototype.js开发实例
- js实现点击左右按钮轮播图片效果实例