Jquery 实现弹出层插件


Posted in Javascript onJanuary 28, 2015

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件。不多废话,直接开始吧!

1:遮罩层

 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask

.mask

{

    position: fixed;

    width: 100%;

    height: 100%;

    background-color: white;

    overflow: scroll;

    filter: alpha(opacity=50);

    -moz-opacity: 0.5;

    opacity: 0.5;

    z-index: 20;

    overflow: auto;

    top: 0px;

    right: 0px;

}

2:插件主要参数

tag:为什么需要tag?用tag可以指定需要弹出的隐藏元素,可以指定tag为选择器“#*”,这样可以弹出指定元素。这里我设置默认为this。

mainContent:这个参数是否需要?我觉得用处不大,我设置主要是为了对服务器控件,如果全部加在body,那就不能提交表单。但是submit点击后页面会刷新,弹出层消失,所以我觉得还是无用...

    $.fn.xsPop = function (options) {

        var defaults = {//默认值

            title: "弹出窗口", //窗口标题

            width: 500,

            heigth: 400,

            tag: this, //弹出需要加载的元素

            close: "关闭",

            mainContent: "body"//容器,为了可以提交表单,不过submit会刷新页面...

        };

        var options = $.extend(defaults, options); //以传参覆盖

        this.each(function () {

            xsMain(options.title, options.width, options.heigth, options.tag, options.close, options.mainContent); //插件的主入口

        });

    };

3:利用xsMain函数添加元素,并绑定事件

这里有个处理,就是控制高度和宽度如果设置超过了屏幕高宽度,就会适应屏幕,这样防止弹出层过大不能操作。其他的就是普通的添加html,本人用的string相加

//根据传入数据,添加遮罩层,弹出提示框

    function xsMain(title, width, height, tag, close, mainContent) {

        var divmask = "<div class=\"mask\"></div>";

        $(mainContent).append(divmask);

        var xsPop1 = " <div id=\"xsPop\" class=\"PopUp\"> <div class=\"PopHead\" id=\"xsPopHead\">";

        var xsPop2 = " <b>" + title + " </b><span id=\"xsColse\">" + close + "</span>";

        var xsPop3 = "  </div>  <div class=\"PopMain\" id=\"xsPopMain\">";

        var xsPop5 = "</div><span id=\"xytest\"></span> </div>";

        var allHtml = xsPop1 + xsPop2 + xsPop3 + xsPop5;

        $(mainContent).append(allHtml);

        $(tag).show();

        $(tag).appendTo("#xsPopMain");

        //得到浏览器的高度和宽度,进行后面判断(高度超过,拖动边框限制)

        clientHeight = window.screen.height;

        clientWidth = window.screen.width;

        if (height > clientHeight) {

            height = clientHeight - 100;

        }

        if (width > clientWidth) {

            width = clientWidth - 100;

        }

        $("#xsPop").css({

            "heigth": height + "px",

            "width": width + "px",

            "margin-top": "-" + (height / 2) + "px",

            "margin-left": "-" + (width / 2) + "px"

        });

        $("#xsPopMain").css("height", height - $("#xsPopHead").height());

        xsdrag("#xsPopHead", "#xsPop"); //绑定拖动动作

        $("#xsColse").bind("click", function () { ClosePop(tag, mainContent); }); //绑定关闭动作

    }

4:关闭动作

这里要先把tag给容器,不然后面remove时会一起remove,第二次弹出就找不到tag了。

 //关闭弹出层

    function ClosePop(tag, mainContent) {

        $(mainContent).append(tag); //保存,不然第四步的 $("#xsPop").remove()会把tag清空掉

        $(tag).hide();

        $(".mask").remove();

        $("#xsPop").remove();

    }

5:拖拽效果

方法一:第一次找到的是利用元素的事件,但是很容易出现元素丢失问题,效果不太理想

    //弹出层的拖拽(失败的方法,会出现对象丢失)

    //control 为拖拽的元素,tag为动作的元素,一般control在tag内

    //    function drag(control, tag) {

    //        var isMove = false;

    //        var abs_x = 0, abs_y = 0;

    //        $(control).mousedown(

    //            function (event) {

    //                var top = $(tag).offset().top;

    //                var left = $(tag).offset().left;

    //                abs_x = event.pageX - left;

    //                abs_y = event.pageY - top;

    //                isMove = true;

    //            }).mouseleave(function () {

    //                isMove = false;

    //            });

    //        $(control).mouseup(function () {

    //            isMove = false;

    //        });

    //        $(document).mousemove(function (event) {

    //            if (isMove) {

    //                $(tag).css({

    //                    'left': event.pageX - abs_x + $(tag).width() / 2 - 1,

    //                    'top': event.pageY - abs_y + $(tag).height() / 2 - 1

    //                });

    //            }

    //            return false;

    //        });

    //    }

方法二,本人目前采用的方法,利用document的down和up,但是还要有些许问题,移动过快的问题,坐标有小小的跳动现象

我还发现一个问题,如果我手残把弹出层直接拖到了屏幕上方的内部,这时放手,呵呵,你永远也不能把它拖回来或点关闭了。我去看了下百度首页的弹出层,他们也有这样的现象,但是把窗口点放大缩小后弹出层会重新回到中心。我也试着这样做,但是我绑定onresize会出现不能向最下面移动,他们用的事件肯定不是onresize.所以我就直接判断鼠标位置不能小于0了。

 //弹出层的拖拽

    //control 为拖拽的元素,tag为动作的元素,一般control在tag内

    function xsdrag(control, tag) {

        $(control).mousedown(function (e)//e鼠标事件  

        {

            var offset = $(this).offset(); //DIV在页面的位置  

            var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离  

            var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离  

            $(document).bind("mousemove", function (ev)//绑定鼠标的移动事件,因为光标在DIV元素外面也要有效果,所以要用doucment的事件,而不用DIV元素的事件  

            {

                if (ev.pageY <= 0) { return; }//防止边框超过屏幕后无法关闭和拖动

                $(tag).css({

                    'left': ev.pageX - x + $(tag).width() / 2, //本人的布局需要加这个

                    'top': ev.pageY - y + $(tag).height() / 2

                });

            });

        });

        $(document).mouseup(function () {

            $(this).unbind("mousemove");

        });

    }

6:样式表

弹出层的布局使用的是top和left+margin-top负值,所以我的js里面有多加高度和宽度的一半

.mask

{

    position: fixed;

    width: 100%;

    height: 100%;

    background-color: white;

    overflow: scroll;

    filter: alpha(opacity=50);

    -moz-opacity: 0.5;

    opacity: 0.5;

    z-index: 20;

    overflow: auto;

    top: 0px;

    right: 0px;

}

.PopUp

{

    padding: 0px;

    position: absolute;

    z-index: 21 !important;

    background-color: White;

    border-style: solid solid solid solid;

    border-width: 1px;

    border-color: #C0C0C0;

    left: 50%;

    top: 50%;

}

.PopHead

{

    background-color: #F0F0F0;

    border-bottom-style: solid;

    border-bottom-width: 1px;

    border-bottom-color: #C0C0C0;

    height: 30px;

    cursor: move;

    clip: rect(0px, auto, auto, 0px);

}

.PopHead b

{

    float: left;

    display: block;

    color: #C0C0C0;

    font-family: System;

    font-size: medium;

    line-height: 30px;

    text-indent: 2em;

}

.PopHead span

{

    float: right;

    display: block;

    text-align: right;

    line-height: 30px;

    cursor: pointer;

    text-indent: 5px;

    color: #FF0000;

    font-size: 12pt;

}

.PopMain

{

    padding: 10px;

    overflow: auto;

}

7:页面的使用

测试服务器控件可以提交表单

        $(document).ready(function () {

            $("#btnPop").click(function () {

                var options = {

                    title: "my pop",

                    width: 500,

                    heigth: 400,

                    close: "close",

                    mainContent: "form"

                }

                $("#pop1").xsPop(options);

            });

        });

好了差不多就这些了。本来还想做个边框拉动改变大小的,发现需要点时间,就先不做了。其实说实话,我觉得拖拽意义不大,边框控制大小意义也不大,因为我设置了溢出会出现滚动条。

Javascript 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
JavaScript数组常用方法
Mar 02 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
eslint 的三大通用规则详解
May 16 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 #Javascript
Jquery 实现table样式的设定
Jan 28 #Javascript
Jquery 实现checkbox全选方法
Jan 28 #Javascript
AngularJS实现表单验证
Jan 28 #Javascript
jQuery制作简单柱状图实例
Jan 28 #Javascript
js分页工具实例
Jan 28 #Javascript
js制作简易年历完整实例
Jan 28 #Javascript
You might like
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
vue+axios实现post文件下载
2019/09/25 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
旅游与环境专业求职信
2014/06/05 职场文书
诚实守信演讲稿
2014/09/01 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2014年工程部工作总结
2014/11/25 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
2015年女职工工作总结
2015/05/15 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
css3带你实现3D转换效果
2022/02/24 HTML / CSS
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android