情感专家

用JQuery实现模态对话框完整代码-JSJQuery-编程笔记-幽默笑话

您现在的位置:情感专家 > www.yabovip17.con时间2019-07-05 11:27 来源:本站

用JQuery实现模态对话框完整代码-JSJQuery-编程笔记-幽默笑话

文章内容用JQuery实现模态对话框完整代码修改时间:[2012/06/3012:03]阅读次数:[1430]发表者:[沩筱]最近在项目中,用到了模态对话框,实现了该功能。 现把jQuery实现的代码共享出来。 下面是该完整代码:scriptlanguage="javascript"varmodal;varfx={"initModal":function(width){if($(".modal-window").length==0){varmoveFlag=false;return$("div").mousedown(function(event){moveFlag=true;varyPos=parseInt($(this).css(top));varxPos=parseInt($(this).css(left));varx=;vary=;$(this).mousemove(function(event){if(moveFlag==true){x1=;y1=;varcurX=xPos+x1-x;varcurY=yPos+y1-y;$(this).css(top,curY+px).css(left,curX+px);}})}).mouseup(function(event){moveFlag=false;}).addClass("modal-window").css("width",width+"px").css("margin-left","-"+width/2+"px").appendTo("body");}else{return$(".modal-window").css("width",width+"px");}},"addCloseButton":function(fx){$("span").addClass("modal-close-btn").html("").click(function(event){();}).appendTo($(".modal-window"));},"boxOut":function(event){$(".modal-window,.modal-overlay").fadeOut("slow",function(event){$(this).remove();});},"boxIn":function(data,modal){$("div").hide().addClass("modal-overlay").click(function(event){(event);}).appendTo("body");().html(data).appendTo("body");$(".modal-window,.modal-overlay").fadeIn("slow");}};/script将该代码放在要使用模态窗口的页面里,再嵌入下面CSS代码:styletype="text/css".modal-window{position:absolute;top:140px;left:50%;width:300px;height:auto;margin-left:-150px;padding:0px;border:1pxsolid#000;background-color:#fff;z-index:5;display:none;}.modal-close-btn{position:absolute;top:8px;right:8px;margin:0;padding:0;width:15px;height:14px;color:#000000;background-image:url(../../images/);background-repeat:no-repeat;cursor:hand;}.modal-overlay{top:0px;left:0px;width:100%;height:100%;position:absolute;background-color:rgba(0,0,0,.4);z-index:4;}/style下面是简单的调用代码:scriptlanguage="javascript"modal=("720");vardata="tablewidth=100%border=0cellspacing=1cellpadding=0class=input_bluetabletrtdwidth=100%"++"/td/trtrtdimgsrc="++"width=720height=576/td/tr/(data,modal);(fx);/script说明:);初始话对像,并设定好宽度data=;初始化对话框的内容在css中使用了关闭按钮,该按钮使用了图片,该图片没有提供,可以根据自己需要修改。

回到顶部