JavaScript实现弹窗效果代码分析

效果图：

话不多说，请看代码：

每个弹窗的标识var x=0；var idzt=new Array()；变量窗口=函数（配置){标识不重复idzt[x]=' Zhu ti ' x；弹窗身份初始化，接收参数这个。config={ width : config。宽度| | 300，宽度高度：配置高度|| 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；窗口移动如果(这个。配置。Isdrag){ 0鼠标移动弹出窗$('.标题')。绑定(' 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 -霜降开始YY坐标移动最大最小限制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；标识增加}以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！