jQuery弹出窗口简单实现代码

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

今天讲了Jquery的弹出窗口的组成和用法：

先把引用文件的代码写好：

//每个弹窗的标识var x=0；var idzt=new Array()；变量窗口=函数（配置){ //ID不重复idzt[x]=' Zhu ti ' x；//弹窗ID //初始化，接收参数这个。config={ width : config。宽度| | 300，//宽度高度： config.height || 200，//高度buttons : config.buttons || ' '，//默认无按钮title : config.title || '标题', //标题content : config.content || '内容', //内容isMask :配置。isMask==false？false:config.isMask || true，//是否遮罩是拖动：配置。Isdrag==false？false:config.isDrag || true，//是否移动};//加载弹出窗口var w=($(窗口)。width()-这个。配置。宽度)/2；var h=($(窗口)。height()-这个。配置。高度)/2；var NR=' div class=' Zhu ti ' id=' idzt[x]' ' bs=' x ' style=' width : '这个。配置。宽度' px；高度：英尺。配置。高度' px；背景-颜色：白色；左侧left : ' w ' pxtop : ' h ' px/div '；$(“正文”).追加(NR)；//加载弹窗标题var content=' div id=' title ' x ' ' class=' title ' bs=' x ' ' ' this。配置。title ' div id=' close ' x ' ' class=' close ' bs=' x ' '/div/div '；//加载弹窗内容var nrh=这个。配置。身高-75；content=content ' div id=' content ' x ' ' bs=' x ' ' class=' content ' style=' width :100%；高度： ' nrh ' px "这个。配置。内容/div；//加载按钮content=content ' div id=' btnx ' x ' ' bs=' x ' ' class=' btnx ' ' this。配置。按钮'/div '；//将标题、内容及按钮添加进窗口$("#"idzt[x]).html(内容);//创建遮罩层如果(这个。配置。ismask){ var ZZ=' div id=' ZZ '/div '；$(“正文”).追加(ZZ)；$('#zz ').css('display '，' block ')；} //最大最小限制，以免移动到页面外var maxX=$(窗口)。width()-这个。配置。宽度；var maxY=$(窗口)。height()-这个。配置。身高；var minX=0，MinY=0；//窗口移动if(this.config.isDrag) { //鼠标移动弹出窗$('.标题')。绑定(' mousedown '，函数(e){ var n=$(this).attr(' bs ')；//取标识//使选中的到最上层$('.朱蒂' .css('z-index '，3)；$("#"idzt[n]).css('z-index '，4)；//取初始坐标var endX=0，//移动后X坐标endY=0，//移动后Y坐标startX=parseInt($('#' idzt[n]).css(“”左'),//弹出层的初始X坐标startY=parseInt($('#' idzt[n]).css('top ')，//弹出层的初始Y坐标downX=e.clientX，//鼠标按下时，鼠标的X坐标霜降=e.clientY//鼠标按下时，鼠标的Y坐标//绑定鼠标移动事件$(“正文”).绑定(' mousemove '，函数{ endX=es。客户端x-DoWn x startX；//X坐标移动endY=es.clientY -霜降开始//是坐标移动//最大最小限制if(ENDx MaxX){ ENDx=MaxX；} else if(ENDx 0){ ENDx=0；} if(EnDy MaxY){ EnDy=MaxY；} else if(EnDy 0){ EnDy=0；} $("#"idzt[n]).css('top '，ENDy ' px ')；$("#"idzt[n]).css('left '，ENDx ' px ')；window.getSelection？window.getSelection().removeAllRanges():文档。选择。empty()；//取消选中文本});});//鼠标按键抬起，释放移动事件$(“正文”).bind('mouseup '，function(){ $('body ').解除绑定(“鼠标移动”)；});} //关闭窗口$('.关闭')。单击(function(){ var m=this。GetAttribute(' bs ')；//找标识$("#"idzt[m]).移除();//移除弹窗$('#zz ').移除();//移除遮罩})x；//标识增加}这个射流研究…文件把弹出窗口的内容，样式，位置，按钮，以及遮罩层都做了处理，在引用前好好看看里面的代码，最好都能弄懂，里面也做了详细的注释，希望可以帮的你。

下面是半铸钢钢性铸铁(铸造半钢)样式表：zhuti { position:absolutez索引：3;font-size :14 px边界半径：5像素；box-shadow:0 0 5px白色；飞越：隐藏；color: # 333}。标题{背景色： # 3498 db垂直对齐：毫米；高度：35px宽度：100%;线高：35 px文本缩进：1 em}.关闭{浮动：右宽度：35 pxheight :35 pxfont-weight : bold；线高：35 px垂直对齐：毫米；颜色：白色；font-size :18 px} .关闭：悬停{光标：指针；}.内容{ text-indent :1 em；填充-top :10 px；}.btnx { height:30px宽度：100%;文本缩进：1 em}.btn { height:28px宽度：80 pxfloat:left左边距left :20 pxcolor : # 333 } # ZZ { width :100%；高度：100%;opa city 33600.15 display : none背景色： # CCCz索引：2;位置：绝对；top:0pxleft:0px}这个样式表把每个标签和所需要的样式都写好了，这样就能节省主要页面的代码量，并且让主页面看起来非常的整齐，如果要改，只需要在半铸钢钢性铸铁(铸造半钢)样式表中修改即可，注意：不管要引用什么文件，必须把Jquery文件放在最前面！

下面是主页面代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title脚本类型=' text/JavaScript ' src=' http : jquery-1。11 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : tanchuan。js/脚本链接。CSS“rel=”外部no follow“rel=”样式表type=' text/CSS '/style type=' text/CSS ' * { margin 3360 0px auto；}/style/head body style='底色： # 999 ' div style='宽度：200 px边距-top :10 px '输入类型='按钮'值='弹出窗口id=' btntc ' style=' width :100 px；高度：30 pxfont-size :18 px//div/body脚本类型=' text/JavaScript ' $(文档)。就绪(函数(e) { $('#btntc ').单击(function(){ var html=' div style=' color : red '这是测试的弹窗/div '；var按钮='输入类型='按钮'值='确定/input type='button' value='取消' /';var win=新窗口({宽度： 400，//宽度高度： 300,//高度标题： '测试弹窗', //标题内容： html，//内容isMask : false，//是否遮罩按钮：按钮，//按钮isDrag:true，//是否移动});})});/script/html同样的，主页面里面也加了详细的注释，这样便于日后的理解，希望可以帮的自己和大家。让我们看看效果吧：