弹窗：popwindow

四部分

①windows.html

<!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 : 800, //宽度

                height : 500, //高度

                title : '弹窗标题', //标题

                content : html, //内容

                isMask : true, //是否遮罩

                buttons: button, //按钮

                isDrag:true,

                });

        })

});

</script>

</html>

②tanchuang.js

// 每个弹窗的标识

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.getAttribute("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++;  //标识增加

}

③tanchuang.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;

}

④jquery-1.11.1.min.js

显示效果：

弹窗：popwindow 4部分的更多相关文章

  1. Dialog , ProgressDialog , PopWindow 区别

    本质区别: Dialog:非阻塞对话框,弹出对话框时时,后台还可以做事情,点击背景时,对话框消失 ProgressDialog:带有圆形进度或者条形进度的对话框,一般结合handler使用.任务完成后 ...

  2. ajax练习习题一弹窗查看

    显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  3. Android进阶2之PopupWindow弹窗（有点悬浮窗的感觉）

    PopupWindow是一个可以用来显示一个任意的视图的弹出窗口,他需要完全依赖layout布局. 它没什么界面,在弹出的窗口中完全显示布局中的控件. 上面两个美女头就是弹窗PopupWindow显示 ...

  4. android UI进阶之弹窗的使用（2）--实现通讯录的弹窗效果

    相信大家都体验过android通讯录中的弹窗效果.如图所示: android中提供了QuickContactBadge来实现这一效果.这里简单演示下. 首先创建布局文件: <?xml versi ...

  5. 通用对话弹窗CommonDialog

    代码地址如下:http://www.demodashi.com/demo/12592.html 通用对话弹窗CommonDialog Version 1.0 Created by chenchangj ...

  6. 自定义 popWindow弹框 工具包

    前言:因为Android 没有像IOS一样的ActionSheet,虽然在github上看到有一些类似ActionSheet的库,总觉得不好用,不如自己写一个弹框通用类,样式全部自已来多好. Step ...

  7. 2016/4/2 json：js和jquery中轻量级数据交换格式 例： 窗口弹出 popwindow

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  8. Android PopWindow的替代品BasePopup

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/109 背景描述 最近一段时间,又看到了这个开源项目Base ...

  9. Android Popwindow使用总结

    Android Popwindow使用总结 转 https://www.jianshu.com/p/3812ff5ef272 1.基本使用方法 View view = getLayoutInflate ...

随机推荐

  1. Kubernentes中的身份验证

    Kubernentes中的身份验证 kubernetes 系统的各组件需要使用 TLS 证书对通信进行加密,本文档使用 CloudFlare 的 PKI 工具集 cfssl 来生成 Certifica ...

  2. lamp+nginx代理+discuz+wordpress+phpmyadmin

    实验课题:搭建LAMP,安装Nginx,作为代理,将MySQL安装在单独的机器,apache负责动态,nginx负责静态 实验环境: 1.VMware Workstation 11 2.设备A:MyS ...

  3. python移植性提示

    移植性提示 2.1 预计在python3.0中,运算符/只能执行True除法.3.0发布后,程序员要更新自己的程序,以兼容新行为. 3.1 python2.0版本开始引入增量赋值符号,在老版本pyth ...

  4. 新人补钙系列教程之：AS 与 JS 相互通信

    比较常用的,AS 调用 JS private function callJS():void{ ExternalInterface.addCallback("callbackQQPay&quo ...

  5. python调用jieba(结巴)分词 加入自定义词典和去停用词功能

    把语料从数据库提取出来以后就要进行分词啦,我是在linux环境下做的,先把jieba安装好,然后找到内容是build jieba PKG-INFO setup.py test的那个文件夹(我这边是ji ...

  6. Linux学习之二-Linux系统的目录结构

    Linux学习之二-Linux系统的目录结构 在Linux的根目录下,有很多的目录,但是需要记住,对于Linux而言,一切皆文件.因此此处的目录也是文件.用ls / 命令就能看到根目录下的各类不同的目 ...

  7. poj1236 Network of Schools ，有向图求强连通分量（Tarjan算法），缩点

    题目链接: 点击打开链接 题意: 给定一个有向图,求: 1) 至少要选几个顶点.才干做到从这些顶点出发,能够到达所有顶点 2) 至少要加多少条边.才干使得从不论什么一个顶点出发,都能到达所有顶点   ...

  8. TestNG+ReportNG+IDEA+Git+Jenkins+surefire持续集成数据驱动dubbo接口测试

    一.pom.xml增加testng相关配置 <!--添加插件 关联testNg.xml--><plugin> <groupId>org.apache.maven.p ...

  9. axis2 利用小工具cat.aar

    Axis2: Web Service是现在最适合实现SOAP的技术,而Axis2是实现Web Service的一种技术框架(架构). 昨天把把菜刀脚本打包发现<>在xml会被转义,导致菜刀 ...

  10. Jscript 随记

    1.Jscript 不能用来编写独立执行的应用程序,而且没有对读写文件的内置支持. 2.注意,语句块中的原始语句以分号结束.但语句块本身并不以分号结束. 3.注意,Jscript 与 C++ 以及其它 ...