全国咨询热线:18720358503

微信小程序那么火_jQuery弹出窗口简略完成代码

类别:企业动态 发布时间:2021-01-12 浏览人次:

jQuery弹出窗口简单实现代码     —21克的爱   这篇文章主要为大家详细介绍了jQuery弹出窗口的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
content : config.content || '内容', //内容 isMask : config.isMask == false false:config.isMask || true, //是否遮罩 isDrag : config.isDrag == false false:config.isDrag || true, //是否移动 //加载弹出窗口 var w = ($(window).width()-this.config.width)/2; var h = ($(window).height()-this.config.height)/2; var nr = " div id='"+idzt[x]+"' bs='"+x+"' style='width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;' /div $("body").append(nr); //加载弹窗标题 var content =" div id='title"+x+"' bs='"+x+"' "+this.config.title+" div id='close"+x+"' bs='"+x+"' × /div /div //加载弹窗内容 var nrh = this.config.height - 75; content = content+" div id='content"+x+"' bs='"+x+"' style='width:100%; height:"+nrh+"px;' "+this.config.content+" /div //加载按钮 content = content+" div id='btnx"+x+"' bs='"+x+"' "+this.config.buttons+" /div //将标题、内容及按钮添加进窗口 $('#'+(content);
var maxX = $(window).width()-this.config.width; var maxY = $(window).height()-this.config.height; var minX = 0, minY = 0; //窗口移动 if(this.config.isDrag) //鼠标移动弹出窗 $(".title").bind("mousedown",function(e){ var n = $(this).attr("bs"); //取标识 //使选中的到最上层 $(".zhuti").css("z-index",3); $('#'+idzt[n]).css("z-index",4); //取初始坐标 var endX = 0, //移动后X坐标 endY = 0, //移动后Y坐标 startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标 startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标 downX = e.clientX, //鼠标按下时,鼠标的X坐标 downY = e.clientY; //鼠标按下时,鼠标的Y坐标 //绑定鼠标移动事件 $("body").bind("mousemove",function(es){ endX = es.clientX - downX + startX; //X坐标移动 endY = es.clientY - downY + startY; //Y坐标移动 //最大最小限制 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():document.selection.empty(); //取消选中文本 //鼠标按键抬起,释放移动事件 $("body").bind("mouseup",function(){ $("body").unbind("mousemove"); //关闭窗口 $(".close").click(function(){ var m = this.getAttribute("bs"); //找标识 $('#'+idzt[m]).remove(); //移除弹窗 $('#zz').remove(); //移除遮罩 x++; //标识增加

这个JS文件把弹出窗口的内容,样式,位置,按钮,以及遮罩层都做了处理,在引用前好好看看里面的代码,最好都能弄懂,里面也做了详细的注释,希望可以帮的你。

下面是CSS样式表:

.zhuti
 position:absolute;
 z-index:3;
 font-size:14px;
 border-radius:5px;
 box-shadow:0 0 5px white;
 overflow:hidden;
 color:#333;
.title
 background-color:#3498db;
 vertical-align:middle;
 height:35px;
 width:100%;
 line-height:35px;
 text-indent:1em;
.close{
 float:right;
 width:35px;
 height:35px;
 font-weight:bold;
 line-height:35px;
 vertical-align:middle;
 color:white;
 font-size:18px;
.close:hover
 cursor:pointer;
.content
 text-indent:1em;
 padding-top:10px;
.btnx
 height:30px;
 width:100%;
 text-indent:1em;
 height:28px;
 width:80px;
 float:left;
 margin-left:20px;
 color:#333;
 width:100%;
 height:100%;
 opacity:0.15;
 display:none;
 background-color:#ccc;
 z-index:2;
 position:absolute;
 top:0px;
 left:0px;

这个样式表把每个标签和所需要的样式都写好了,这样就能节省主要页面的代码量,并且让面看起来非常的整齐,如果要改,只需要在CSS样式表中修改即可,注意:不管要引用什么文件,必须把Jquery文件放在最前面!!!

下面是面代码:

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 
 title 无标题文档 /title 
 script type="text/javascript" src="jquery-1.11.2.min.js" 
 /script 
 script type="text/javascript" src="tanchuang.js" 
 /script 
 link href="tanchuang.css" rel="external nofollow" rel="stylesheet" type="text/css" / 
 style type="text/css" 
 margin: 0px auto;
 /style 
 /head 
 body 
 div 
 input type="button" value="弹出窗口" id="btntc" / 
 /div 

var html = " div 这是测试的弹窗 /div var button =" input type='button' value='确定' / input type='button' value='取消' / var win = new Window({ width : 400, //宽度 height : 300, //高度 title : '测试弹窗', //标题 content : html, //内容 isMask : false, //是否遮罩 buttons : button, //按钮 isDrag:true, //是否移动 /script /html

同样的,面里面也加了详细的注释,这样便于日后的理解,希望可以帮的自己和大家。让我们看看效果吧:

点击弹出窗口之后的效果:

我们可以看到每个弹出窗口都可以移动,并且可以弹出无数个窗口,如果把遮罩层改成true,那样就不能再出现第二个弹出窗口了。

一定要记住遮罩层的实用,这样可以避免很多BUG如果要引用弹出窗口一定要测试好了再使用,以防出现问题,切记!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


下一篇:没有了

推荐阅读

微信小程序那么火_jQuery弹出窗口简略完成代码

jQuery弹出来对话框简易完成编码 —21克的爱 本文关键为大伙儿详尽详细介绍了jQuery弹出来对话框的简易完成编码,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下...

2021-01-12
网站的设计与切图-凡科抠图快速为结婚照修复调

photoshop迅速为婚纱礼服照修补调制出复古时尚色实例教程站酷 公布 创作者:zengk 我想评价本文关键详细介绍了photoshop迅速为婚纱礼服照修补调制出复古时尚色实例教程,喜爱的朋...

2021-01-12
直播购物微信小程序_javascript编程完成栈的方法详

javascript程序编写完成栈的方式详细说明【經典数据信息构造】 本文关键详细介绍了javascript程序编写完成栈的方式,简易表明了栈的定义、特性并融合案例方式剖析了javascript栈的界...

2021-01-12
深圳网站建设公司哪家好或者比较靠谱的

许多人到在网上检索深圳市企业网站建设哪个好、深圳市企业网站建设企业价格、建立网站是多少钱等难题,能够得到许多不一样的回答,之中许多是营销推广营销推广信息内容,存...

2021-01-12
广州凡科互联网科技股份有限公司招聘网红主播

招聘人数:9职位信息岗位职责:1、负责淘宝/京东平台店铺直播及抖音等其他平台进行直播;2、负责热点类网络直播的内容策划,包括选题、执行、统等工作,包括衍生文章、短视频创...

2021-01-12
广州凡科互联网科技股份有限公司招聘UI设计师

招聘人数:11职位信息主要职责:1.负责项目/产品web网站、PC端、移动端产品的UI界面设计、升级维护;2.参与产品整体设计,UI设计方案规划,与产品经理或项目经理进行原型设计及细...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信