这部分的内容是绑定事件，模拟模态窗口与拖动。先从最简单的说起，弹出窗口现在有三个按钮，反正都是点击事件，我们可以利用事件代理以节省侦听器。侦听器放在顶层容器中就是，然后我们再判定冒泡上来的事件的源对象的标签是否为a元素，再根据其类名添加相应的事件。
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;
}
}
}
其中me即为this，Dialog类的实例，因为就这样简单把this暴露在绑定函数中，它对应的是container这个顶层容器，而不是实例。hide方法的功能很简单，隐藏顶层容器。getEvent方法的具体代码可参见我的另一篇博文，用来快捷取得事件，事件源对象以及源对象的标签名。到此，绑定事件部分讲完了。
再看拖放，我以前有两篇博文专门说这问题，可参见这里与这里。现在扼要演实一下如何运用。首先在init()主方法中添加如下代码：
container.onmousedown = function(e){
e = e || event;
container.offset_x = e.clientX - container.offsetLeft;
container.offset_y = e.clientY - container.offsetTop;
document.onmousemove = function(e){
me.drag(e,container)
}
document.onmouseup = function(){
me.dragend(container)
}
}
然后再添加两个原型方法，分别为drag与dragend。
drag:function(e,el){
e = e || event;//获得事件对象
var l = e.clientX - el.offset_x + "px",
t = e.clientY - el.offset_y + "px";
this.incss(el, {cursor:"move",left:l,top:t})
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
},
dragend:function(el){
el.style.cursor = "";
document.onmouseup = document.onmousemove = null;
}
因为我原来的动态添加样式规则方法css名副其实，就是动态添加，不具备修改能力，因此对于在拖动中频繁修改的CSS属性就无能为力了，于是我又用回内联样式。它的代码很简单，以前我也多次演示过这东西。
incss:function(node,bag){
var str = ";"
for(var i in bag){
if(bag.hasOwnProperty(i))
str += i+":"+bag[i]+";"
}
node.style.cssText = str;
}
如果IE6死掉是多么美好了，基本上就是这样简单。我们在IE6中拖啊拖，遇到select标签了！为了掩住了它，我们需要一个iframe标签，并把它放到顶层容器之前（它与顶层容器是兄弟节点）。由于我们的弹出窗口是有阴影的，因此iframe的大小应该为弹出窗口加阴影的大小，并且其z-index比它顶层容器一点。
if(me.ie6){
me.iframe = document.createElement("");
container.insertAdjacentElement('beforeBegin',me.iframe);
}
在拖动窗口时也拖动iframe。
drag:function(e,me){
e = e || event;//获得事件对象
var el = me.container,
l = e.clientX - el.offset_x + "px",
t = e.clientY - el.offset_y + "px";
this.incss(el, {cursor:"move",left:l,top:t})
if(this.ie6){
with(me.iframe.style){//当用cssText设置iframe的样式时，其display变为inline，就无法掩住select
left=l; //另，当设置iframe的allowTransparency="true" ，也不能掩住select
top=t;
}
}
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
},
最看模态窗口的实现。现在所有浏览器都支持showModeDialog方法了，即使是火狐。但在首次使用此方法，IE会有提示是否允许执行。若用户以前做够了弹出广告的骚扰，我们再用这方法来实现，恐怕就行不通了。因此我是使用纯DIV来模拟。首先是冻结窗口，把可视区外部分隐藏掉，阻止滚动条出现。其次阻止弹出窗口外的其他部分的右键事件与选择事件。
mode:function(w,h){
var mask = Dialog.mask,me = this;
//IE6的addRule方法存在bug，不支持联合选择器，即html,body{*********}这种形式，只好分开写！
this.css("html","margin:0;border:0;width:100%;height:100%;overflow:hidden;");
this.css("body","margin:0;border:0;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);
}
},
mode方法我们在show与hide中调用。
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);
},
stopEvent方法是用来阻止事件冒泡与浏览器的默认事件，一个非常常用的方法。
stopEvent:function(e){
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
e.stopPropagation();
}else{
e.returnValue = false;
e.cancelBubble = true;
}
},
<!doctype html> <title>一步步教你实现弹出窗口 by 司徒正美</title> <meta charset=”utf-8″/> <meta name=”keywords” content=”一步步教你实现弹出窗口 by 司徒正美” /> <meta name=”description” content=”一步步教你实现弹出窗口 by 司徒正美” /> <mce: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)” mce_href=”javascript:void(0)”>取消</a>’); builder.push(‘<a class=”positive” href=”javascript:void(0)” mce_href=”javascript:void(0)”>确认</a>’); builder.push(‘</div></form>’); builder.push(‘<a class=”closebtn” href=”javascript:void(0)” mce_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(“<span class=”mceItemObject” 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); 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) { var 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 dialog; setTimeout(function(){ //定时器是为了能在我运行框中正常运行，项目中没有必须放到里面去！ dialog = new Dialog({width:400,height:300,title:”司徒正美”}); dialog.hide(); },0) var bn = document.getElementById(“test”); bn.onclick = function(){ dialog.show(); dialog.content.innerHTML = “弹出窗口中间的部分可以用dialog.content.innerHTML重写!” } } // –></mce:script> <h2 style=”text-align:center” mce_style=”text-align:center”>一步步教你实现弹出窗口 by 司徒正美</h2> <div id=”parent”></div><b id=”child” >样式规则</b> <p style=”color:red” mce_style=”color:red”>在chrome中好像没办法用width:100%,height:100%,overflow:hidden冻结窗口，只能隐藏滚动条。</p> <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> <button id=”test”>测试</button> <div id=”multi”></div> <p>http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/</p> <p>https://developer.mozilla.org/cn/Canvas_tutorial</p> <p>http://www.btinternet.com/~st_rise/main/mainfram.htm?../webplus/vml/vfill.htm</p> http://www.svgbasics.com/filters3.html ar callerFunc = arguments.callee.caller.toString(); callerFuncName = (callerFunc.substring(callerFunc.indexOf(“function”) + 8, callerFunc.indexOf(“(“)) || “anoynmous”) <pre> <p>通过正则表达式将查询字符串转化为对象</p> function getQuery(s){ var arr = s.split(‘?’); var param = arr[1].split(‘&’); var obj = {}; for(var i =0 ; i<span .length; i++){ var p = param[i].split(‘=’); obj[p[0]] = p[1]; } return obj; } </pre class=”mceItemParam”></span>
运行代码
<!doctype html> <title>一步步教你实现弹出窗口 by 司徒正美</title> <meta charset=”utf-8″/> <meta name=”keywords” content=”一步步教你实现弹出窗口 by 司徒正美” /> <meta name=”description” content=”一步步教你实现弹出窗口 by 司徒正美” /> <mce: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)” mce_href=”javascript:void(0)”>取消</a>’); builder.push(‘<a class=”positive” href=”javascript:void(0)” mce_href=”javascript:void(0)”>确认</a>’); builder.push(‘</div></form>’); builder.push(‘<a class=”closebtn” href=”javascript:void(0)” mce_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(“<span class=”mceItemObject” 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;” mce_style=”text-align:center;”>文字居中</td></tr></table>” } bn2.onclick = function(){ dialog2.show(); dialog2.content.innerHTML = “<iframe frameborder=0 src=”http://www.csszengarden.com/” mce_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;” mce_style=”text-align:center;”>” + document.getElementById(“hide”).innerHTML + “</td></tr></table>” } } // –></mce:script> <h2 style=”text-align:center” mce_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> <button id=”test1″>弹出窗口1</button> <button id=”test2″>弹出窗口2（带iframe）</button> <button id=”test3″>弹出窗口3（引用本页的隐藏层）</button> <p style=”padding:1em;color:#a9ea00″ mce_style=”padding:1em;color:#a9ea00″>由于window.onload在运行框内（用window.open(“”,””,””)实现）中失效了，于是无法判断窗口的大小，从而无法实现居中对齐。在标准浏览器还有补救措施，在IE则彻彻底底败给它了。放心，Dialog类完全没问题，有问题的是运行框。</p> <div style=”display:none” mce_style=”display:none” id=”hide”> <center style=”padding:1em;font-weight:700″ mce_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>
运行代码
基本上是这样，300多行，为了兼容Opera的圆角与阴影，有30多行分配给它，为了修正IE6的select bug，有10行分配给它，为了让标准浏览器拥有IE风格的设置样式规则的方法，又要20行。其他的兼容代码估计也有二十行左右。因此浏览器这东西还是一家独大好了。我这个弹出窗口其实还有许多改进之处，如把圆角半透明边框独立出来，作为一个接口，那个动态添加样式的也可以再扩展一下，独立出来，做成另一个接口，再把模态化与拖动独立出来，然后像mootools那样实现类好了，超优雅。
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
暂无评论内容