1.主页面

<!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="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>

2.弹窗封装包

// 每个弹窗的标识

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++;  //标识增加

}

Jquery弹窗效果的更多相关文章

  1. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

  2. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  3. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  4. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  5. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  6. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  7. jquery动画效果---animate()--滚屏

    jquery动画效果---animate()方法---W3school

  8. jquery 之效果

    // jquery 之效果 .css()既可以获取值,如 .css('fontSize'), 又可以设置内置属性,既可用驼峰式,也可以用连字符版,如 .css('background-color', ...

  9. SharePoint 2013 弹窗效果之URL打开方式(一)

    在SharePoint中想做一个弹出效果其实很简单,仅仅在js中使用SharePoint Modal Dialog, 以下做一个简单的例子:很多情况下我们会通过linkButton弹出一个详细页面,那 ...

随机推荐

  1. 【前端】从输入URL到页面加载完成的过程中都发生了什么事情

    把URL分割成几个部分:协议(http, https).网络地址(xxx.xxx.xxx.xxx).资源路径(/xxx/xxx.xx).端口号(默认80). 如果地址不是一个IP地址,通过DNS(域名 ...

  2. http错误码

    2xx  成功  200  正常:请求已完成.  201  正常:紧接 POST 命令.  202  正常:已接受用于处理,但处理尚未完成.  203  正常:部分信息 - 返回的信息只是一部分.   ...

  3. VBS整人代码

    记得刚开始学VB脚本语言的时候,写了一段调用系统进程的代码,挺好的: dim wshif msgbox("笑笑很帅",vbyesno,"请回答是或否")=vby ...

  4. python之路1（初识python）

    python简史: python我认为特性就是简洁,灵活,高效. python重要版本: python1991年问世, python2.4:2004,同年django框架诞生. python2.6:2 ...

  5. 远程调试 ASP.NET MVC 项目

    Visual Studio 支持从一台计算机到另一台设备的远程调试.进行远程调试时,主机可以是任何支持 Visual Studio 的平台.远程设备可以是 x86.x64 或 ARM 平台. 本文将指 ...

  6. ASP.NET MVC 静态资源打包和压缩问题小记

    ASP.NET MVC 中有个 BundleConfig 用于静态资源的打包和压缩,我在使用的过程中遇到一些问题,现在做下总结,并给出具体的解决方案. 问题一:打包压缩后的 JavaScript 和 ...

  7. CSUOJ_1002

    /* * Title : A+B(III) * Data : 2016/11/09 * Author : Andrew */ #include <iostream> #include &l ...

  8. 基础笔记12（socket,url网络通信）

    进一步深入socket 1.网络通信条件: .IP地址,可用主机名. .传输数据时将不用的应用程序通过数字标识区分开来,这种标识称为逻辑端口,也称端口.(0-65535端口,一般系统预留0-1024) ...

  9. python 03

    数据结构 在 python 中有4种内建数据结构, 列表, 元组, 字典和集合. 列表 list 有序项目的数据结构, 类似数组, 是对象. 列表用中括号中用逗号分隔的项目定义.例如 ['apple' ...

  10. I2C总线（异步）

    起始位与停止位的定义: 起始信号:当SCL为高期间,SDA由高到低的跳变:启动信号是一种电平跳变时序信号,而不是一个电平信号. 停止信号:当SCL为高期间,SDA由低到高的跳变:停止信号也是一种电平跳 ...