jQuery弹出窗口简单实现代码


Posted in Javascript onMarch 09, 2017

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

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

// 每个弹窗的标识
var x =0;

var idzt = new Array();

var Window = function(config){
 
 //ID不重复
 idzt[x] = "zhuti"+x; //弹窗ID
 
 //初始化,接收参数
 this.config = {
  width : config.width || 300, //宽度
  height : config.height || 200, //高度
  buttons : config.buttons || '', //默认无按钮
  title : config.title || '标题', //标题
  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 class='zhuti' 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+"' class='title' bs='"+x+"'>"+this.config.title+"<div id='close"+x+"' class='close' bs='"+x+"'>×</div></div>";
 //加载弹窗内容
 var nrh = this.config.height - 75;
 content = content+"<div id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>"+this.config.content+"</div>";
 //加载按钮
 content = content+"<div id='btnx"+x+"' bs='"+x+"' class='btnx'>"+this.config.buttons+"</div>";
 
 //将标题、内容及按钮添加进窗口
 $('#'+idzt[x]).html(content);
 
 
 //创建遮罩层
 if(this.config.isMask)
 {
  var zz = "<div id='zz'></div>";
  $("body").append(zz);
  $("#zz").css('display','block');
 }
 
 //最大最小限制,以免移动到页面外
 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;
}
.btn
{
 height:28px;
 width:80px;
 float:left;
 margin-left:20px;
 color:#333;
}
#zz
{
 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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 style="background-color:#999">
<div style="width:200px; margin-top:10px">
<input type="button" value="弹出窗口" id="btntc" style="width:100px; height:30px; font-size:18px;" />
</div>


</body>
<script type="text/javascript">
$(document).ready(function(e) {
 
 $('#btntc').click(function(){
  
   var html = "<div style='color:red'>这是测试的弹窗</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>

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

jQuery弹出窗口简单实现代码

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

jQuery弹出窗口简单实现代码

jQuery弹出窗口简单实现代码

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

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

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

Javascript 相关文章推荐
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
纯javascript制作日历控件
Jul 17 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
Javascript中的arguments对象
Jun 20 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 #Javascript
详解Vue方法与事件
Mar 09 #Javascript
Vue实现自带的过滤器实例
Mar 09 #Javascript
Vue中fragment.js使用方法详解
Mar 09 #Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 #Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 #Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 #Javascript
You might like
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
discuz目录文件资料汇总
2014/12/30 PHP
php文件操作相关类实例
2015/06/18 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python实现下载指定网址所有图片的方法
2015/08/08 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python对XML文件的操作实现代码
2020/03/27 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
自荐信模版
2013/10/24 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python