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. 伪共享和缓存行填充，从Java 6, Java 7 到Java 8

    关于伪共享的文章已经很多了,对于多线程编程来说,特别是多线程处理列表和数组的时候,要非常注意伪共享的问题.否则不仅无法发挥多线程的优势,还可能比单线程性能还差.随着JAVA版本的更新,再各个版本上减少 ...

  2. R语言基本操作函数---变量的基本操作

    1.变量变换        as.array(x),as.data.frame(x),as.numeric(x),as.logical(x),as.complex(x),as.character(x) ...

  3. Obtaining Query Count Without executing a Query in Oracle D2k

    Obtaining Query Count Without executing a Query in Oracle D2k Obtaining a count of records that will ...

  4. ubuntu 配置 jdk的一些常见问题

    首先下好压缩包.我用的是tar.gz 然后在/usr下解压,用mv或rename修改下文件夹名字,省得名字太长,然后再配置环境变量. so easy. 然而,  接下来你肯定会用 source /et ...

  5. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED

    原文地址:http://linuxme.blog.51cto.com/1850814/375752 今天将阿里云服务器更换了一下系统盘,重启成功后,再次通过终端访问阿里云的公网IP报以下信息: @@@ ...

  6. Makefile中头文件在依赖关系中作用

    摘于:http://bbs.csdn.net/topics/120024677 (1)在makefile的依赖关系中用不用体现.h头文件?(2)如果在依赖关系中要体现.h头文件,应该体现到什么层次?＝ ...

  7. js跨域_jsonP

    $.ajax("url", type:"get", dataType:"jsonp", jsonp:"callback" ...

  8. [阅读笔记]Zhang Y. 3D Information Extraction Based on GPU.2010.

    1.立体视觉基础 深度定义为物体间的距离 视差定义为同一点在左图(reference image) 和右图( target image) 中的x坐标差. 根据左图中每个点的视差得到的灰度图称为视差图. ...

  9. 理解tcp协议的3次握手和面向连接

    1.tcp是有连接的, 这个不是说他有个实际的连接,这个是个虚拟的连接,连接的保持信息不是由连接的路线来保存的,他是由连接的两方来保存其状态信息,这就是面向连接的, 2.tcp要3次握手: 客户端发给 ...

  10. C# 拆箱与装箱 要严格控制,数量多起来严重影响效率

    int i = 5; object o = i; int j = (int)o; IComparer x = 5; 1. o的对象必须为一个引用,而数字5不是,则发生了装箱: 运行时将在堆上创建一个包 ...