编写jquery弹出框插件

编写jquery弹出框插件编写jquery弹出框插件弹出框插件在web开发中经常用到,下面我就讲解一个box弹出框的制作弹出框插件的制作几个步骤 1.配置弹出框信息 2.执行默认是否弹出信息 3.启动之前设置插件位置 4.显示弹出框窗口 5.在弹出框窗口绑定事件 6.绑定拖拽事件 7.绑定关闭事件下面我就用代码来编写这个7个步骤的实现,从而来建立一个弹出框。 1.配置弹出框信息 //弹出框基本配置信息和样式 var default={ boxUrl:"box/", //弹出窗口链接地址 opacity:0....

编写jquery弹出框插件弹出框插件在web开发中经常用到,下面我就讲解一个box弹出框的制作弹出框插件的制作几个步骤 1.配置弹出框信息 2.执行默认是否弹出信息 3.启动之前设置插件位置 4.显示弹出框窗口 5.在弹出框窗口绑定事件 6.绑定拖拽事件 7.绑定关闭事件下面我就用代码来编写这个7个步骤的实现,从而来建立一个弹出框。 1.配置弹出框信息 //弹出框基本配置信息和样式 var default={ boxUrl:"box/", //弹出窗口链接地址 opacity:0.5, //背景透明度 callBack:null, //是否有回调命令 noTitle:false, //是否有标题 show:false, //默认是否显示 timeout:0 //弹出框消失时间 target:null, //目标 requestType:null, //设置弹出框请求类型 title:"Title", //设置标题名词 drag:true, //是否可以拖拽 ifreameWH:{ //ifream设置高度和宽度 width:400, height:300 }, html:'' //弹出框内容 } //传递参数和默认参数合并 this.options = $.extend({},defaults, options); //弹出对话框颜色 var boxHtml = '

' + (_this.options.noTitle ? '' : ' ') + '

< /div>

' + _this.option s.title + '

', //背景 background = null, //内容 content = null, $win = $(window), $_this=this; $this=$(this); 2.执行默认是否弹出信息 //是否默认弹出 $win.resize(function{ setPosition(); }) _this.options.show?_this.showBox():$t.click(function(){ _this.showBox(); return false; }); return this; 3.启动之前设置插件位置 //设置弹出框的位置 function setPosition() { //如果弹出窗口没有内容就可以不设置高度 if(!content){ return false; } //得到当前DOM节点的高度 var width=content.width(), //调整未知 lt=calPosition(width); content.css({ left:lt[0]; top:lt[1] }); //得到body的高度 var$bheight=$("body").height(); //得到window窗口的高度 var$wheight=$win.height(); //得到html页面的高度 $hheight=$("html").height(); //得到最大的高度 $h=Math.max($hheith,$wheight); //设置背景的高度和宽度 background.height($h).width($win.width()); } //计算弹出框位置 function calPosition(w) { l=($win.width()-w)/2; t=$win.scrollTop()+$win.height()/9; return[l,t]; } 4.显示弹出框窗口 this.showBox=function() { //移掉wBox_overlay的DOM节点 $("#wBox_ovrlay").remove(); //移掉WBox的DOM节点 $("#wBox").remove(); //将背景先隐藏掉然后添加css并且设置透明度最后加载多body下面 //最后出现 backgroud=$("

") .hide() .addClass('wBox_overlayBG') .css( 'opacity',_this.options.opacity ) .dblclick(function(){ _this.close(); }) .appendTo('body') .fadeIn(300); //将内容加入到body里面 //注意appendTo的顺序不能先加载内容再加载背景 content=$(wBoxHtml).appendTo('body'); //绑定点击事件 handleClick(); } 5.在弹出框窗口绑定事件 /** * 处理点击 * @param {string} what */ function handleClick(){ var con = C.find("#wBoxContent"); if (_this.YQ.requestType && $.inArray(_this.YQ.r equestType, ['iframe', 'ajax','img'])!=-1) { con.html("

"); if (_this.YQ.requestType === "img") { var img = $(""); img.attr("src",_this.YQ.target); img.load(function(){ img.appendTo(con.empty()); setPosition(); }); } else if (_this.YQ.requestType === "ajax") { $.get(_this.YQ.target, function(data) { con.html(data); C.find('.wBox_close').click(_this. close); setPosition(); }) } else{ ifr = $(""); ifr.appendTo(con.empty()); ifr.load(function(){ try { $it = $(this).contents(); $it.find('.wBox_close').click(_ this.close); fH = $it.height();//iframe heig ht fW = $it.width(); w = $win; newW = Math.min(w.width() - 40, fW); newH = w.height() - 25 - (_this.YQ.noTitle ? 0 : 30); newH = Math.min(newH, fH); if (!newH) return; var lt = calPosition(newW); C.css({ left: lt[0], top: lt[1] }); $(this).css({ height: newH, width: newW }); } catch (e) { } }); } } else if (_this.YQ.target) { $(_this.YQ.target).clone(true).show().app endTo(con.empty()); } else if (_this.YQ.html) { con.html(_this.YQ.html); } else{ $t.clone(true).show().appendTo(con.em pty()); } afterHandleClick(); } /* * 处理点击之后的处理 */ function afterHandleClick(){ setPosition(); C.show().find('.wBox_close').click(_this.close). hover(function(){ $(this).addClass("on"); }, function(){ $(this).removeClass("on"); }); $(document).unbind('keydown.wBox').bind('keydow n.wBox', function(e){ if (e.keyCode === 27) _this.close(); return true }); typeof_this.YQ.callBack === 'function' ? _this. YQ.callBack() : null; !_this.YQ.noTitle&&_this.YQ.drag?drag():null; if(_this.YQ.timeout){ setTimeout(_this.close,_this.YQ.timeout); } } 6.绑定拖拽事件 /* * 拖拽函数drag */ function drag(){ var dx, dy, moveout; var T = C.find('.wBox_dragTitle').css('cursor', 'move'); T.bind("selectstart", function(){ return false; }); T.mousedown(function(e){ dx = e.clientX - parseInt(C.css("left")); dy = e.clientY - parseInt(C.css("top")); C.mousemove(move).mouseout(out).css('opacity', 0.8); T.mouseup(up); }); /* * 移动改变生活 * @param {Object} e 事件 */ function move(e){ moveout = false; if (e.clientX - dx < 0) { l = 0; } else if (e.clientX - dx > $win.width() - C.width()) { l = $win.width() - C.width(); } else { l = e.clientX - dx } C.css({ left: l, top: e.clientY - dy }); } /* * 你已经out啦! * @param {Object} e 事件 */ function out(e){ moveout = true; setTimeout(function(){ moveout && up(e); }, 10); } /* * 放弃 * @param {Object} e事件 */ function up(e){ C.unbind("mousemove", move).unbind("mouseout", out). css('opacity', 1); T.unbind("mouseup", up); } } 7.绑定关闭事件 /* * 关闭弹出框就是移除还原 */ this.close=function(){ if (C) { B.remove(); C.stop().fadeOut(300, function(){ C.remove(); }) } }

                    本文档为【编写jquery弹出框插件】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

编写jquery弹出框插件

你可能还喜欢