诗歌月刊

当前位置:首页 > 当代诗歌 > 用JQuery实现模态对话框完整代码-JSJQuery-编程笔记-幽默笑话

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

时间:2019-07-08 整理:本站 点击:48次
文章内容用JQuery实现模态对话框完整代码修改时间:[2012/06/3012:03]阅读次数:[1441]发表者:[沩筱]最近在项目中,用到了模态对话框,实现了该功能。 现把jQue...

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

文章内容用JQuery实现模态对话框完整代码修改时间:[2012/06/3012:03]阅读次数:[1441]发表者:[沩筱]最近在项目中,用到了模态对话框,实现了该功能。 现把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中使用了关闭按钮,该按钮使用了图片,该图片没有提供,可以根据自己需要修改。

------分隔线----------------------------

本月热点

  • 神医嫡女有声小说 神医嫡女在线收听 玄幻·网游在线听小说全集 表达感受的词句
  •    21世纪中西医双料圣手、陆战部队特级医官凤羽珩,duang的一声穿越成大顺朝凤家嫡女。 奈何爹爹不亲,祖母不爱,娘亲懦弱,弟弟年幼,姐妹一个比一个狠辣,穿越重生,绝不能再像原主那般窝囊!...

  • 排骨教主是男是女 排骨教主个人详细资料曝光
  •    排骨教主是一个在YY和B站上非常有人气的歌手,声线清澈动听。 但是很多人搞不清楚排骨教主是男还是女,下面就给大家曝光一下排骨教主的个人详细资料。 排骨教主在YY和哔哩哔哩的...

  • 申万菱信申万医药生物分级(163118)基金经理
  •    现任基金经理简介姓名:上任日期:2017-06-01荆一帆先生:硕士研究生。 2012年起从事金融相关工作,曾任职于华夏基金管理有限公司、国投瑞银基金管理有限公司。 2017年01...

  • 《红袋鼠故事会漫画百科世界》 红袋鼠故事会漫画百科世界杂志订阅
  •    10.伟大的人物都走过了荒沙大漠,才登上光荣的高峰。 11.只要朝着一个方向努力,一切都会变得得心应手。 12.没有坚定不移的信心,任何行动都会失败。 13.得进一寸进一寸,得进一尺...

  • 我们都是好孩子(八)
  •    2018年11月8日,由中国诗歌学会、北京大学中国诗歌研究院、首都师范大学中国诗歌研究中心、四会市人民政府主办的“玉润四会”首届女性诗歌周新闻发布会暨共同打造女性诗歌写作基地签字仪式在北京大学...

  • 我爱我家的作文我爱我家高一作文900字
  •    【初一作文】 小时候的我们有一个小小的梦想,青年的我们有一个崇高的理想,年迈的我们有一个纯粹的愿望,就是拥有一个温暖的家。 ——题记 家,似温暖的小窝,给我们带来甜蜜的回忆和往昔。 ...

  • 西部利得行业主题优选混合C(673043)基金经理
  •    现任基金经理简介姓名:上任日期:2016-05-25韩丽楠女士:基金经理,硕士研究生,毕业于英国约克大学经济与金融专业,获理学硕士学位。 曾任渣打银行国际管理培训生、诺德基金管理有限公司...

  • 广东外语外贸大学成人高考法学专升本专业16
  •    广东外语外贸大学成人高考法学专业一、专业介绍本专业学生熟悉我国法律和党的相关政策,了解法学的基本理论和基本知识,受到法学思维和法律实务的基本训练,具有运用法学理论和方法分析问题和运用法律管理事...

  • 在田径的路上作文1000字
  •    我们不难发现2001—2007年,我国以资源为代价的经济增长,能源消耗大于实际的GDP的收入,不仅破坏了环境,而且不利于经济的可持续增长。从2008年开始,这样的局面有所扭转。 3.能源结构...

  • 第一千一百三十二章 踏破铁鞋无觅处至尊特工最新章节
  •    秦阳脸上露出了微微诧异的神色。 一群修行者?才来没多久?和坤洋勾结在一起?为什么这几句话听起来这么耳熟呢?难道是黑手?不会这么巧吧?秦阳转头和孙乾对视一眼,发现孙乾的眼光也变得颇为奇怪,...

网站地图 | 由诗歌月刊提供的文章均由网友转载于网络,若本站转载中的文章侵犯了您的权益,请与本站管理员联系. Copyright © 2006-2019 诗歌月刊_文学_当代文学www.hx6611.com All Rights Reserved.