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. winform常用的属性（listview），常用容器（二者结合）

    ListVies控件主要用于展示数据(非常实用和重要的控件) FullRowSelect:设置是否行选择模式.(默认为false) (开启之后一下选中一行数据) ___________________ ...

  2. maven添加sqlserver的jdbc驱动包

    http://search.maven.org/中没有sqlserver的jdbc驱动,所以需要本地安装sqljdbc的jar包,然后再在pom里面引入 Step 1 在微软官网下载sqljdbc的j ...

  3. Mifare系列2-非接触卡标准（转）

    本文转自 文/闫鑫原创转载请注明出处http://blog.csdn.net/yxstars/article/details/380799 根据信号发送和接收方式的不同,ISO/IEC14443-3定 ...

  4. SQLite一些函数用法

    --格林威治日期时间,比北京时间晚8小时 select datetime('now'); --格林威治日期 select date('now'); --本地时间 select time('now',' ...

  5. HDU 5934 Bomb（炸弹）

    p.MsoNormal { margin: 0pt; margin-bottom: .0001pt; text-align: justify; font-family: Calibri; font-s ...

  6. 上传文件fileupload

    文件上传: 需要使用控件-fileupload 1.如何判断是否选中文件? FileUpload.FileName -  选中文件的文件名,如果长度不大于0,那么说明没选中任何文件 js - f.va ...

  7. mac 安装命令行开发者工具

    terminal中执行: xcode-select --install然后点击 “安装”即可 mac命令行工具

  8. django数据库的增删改查

    正常启动服务安装数据库cmd命令:python manage.py makemigrations 创建用户 在pxm里面会有一个py文件..这就是生成了表结构cmd命令:python manage.p ...

  9. Deep Learning 23：dropout理解_之读论文“Improving neural networks by preventing co-adaptation of feature detectors”

    理论知识:Deep learning:四十一(Dropout简单理解).深度学习(二十二)Dropout浅层理解与实现.“Improving neural networks by preventing ...

  10. react+redux完整项目

    地址:https://segmentfault.com/a/1190000007642740?utm_source=tuicool&utm_medium=referral