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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
js+css3制作时钟特效
Oct 16 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 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的栏目导航程序
2006/10/09 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP文件与目录操作示例
2016/12/24 PHP
Javascript实现的分页函数
2006/12/22 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
python多进程操作实例
2014/11/21 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
python主线程捕获子线程的方法
2018/06/17 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python中列表的含义及用法
2020/05/26 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
python 实现控制鼠标键盘
2020/11/27 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
如何利用find命令查找文件
2016/11/18 面试题
工艺工程师工作职责
2013/11/23 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
党员批评与自我批评
2014/10/15 职场文书
小兵张嘎观后感
2015/06/03 职场文书
学历证明样本
2015/06/16 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP