1.先来看弹窗的模样

点击“弹出窗口”后会弹出下面窗口

2.下面是实现弹出窗口的代码，其中引入的jquery一般自己有，没有的话可以从网上下载。tanchuang.js和tanchuang.css写在了下面。

　弹窗的一些参数可以参考tanchuang.js里面的，需要更改的拿到显示页面来修改。

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

<div id="tc"></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 : '测试弹窗12345', //标题

                content : html, //内容

                isMask : false, //是否遮罩

                buttons : button, //按钮

                isDrag:true, //是否移动

                });

        })

});
</script>

</html>

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

}

4.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;

}

js写弹窗的更多相关文章

  1. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  2. 用JS写了一个打字游戏，反正我是通不了关

    今天想写个简单的游戏, 打字游戏好像都没写过, 那么就写打字游戏吧, gamePad包含了关卡的信息, 可以用来调整给个关卡字符下落的速度: getRandom函数会返回一个字符对象, 这个对象包含了 ...

  3. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  4. 去它的h5，我还是用js写原生跨平台app吧

    智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...

  5. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  6. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  7. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

  8. .NET获取不到js写的cookie解决方法

    今晚使用javascript设置一个来路的cookie,之后使用ASP.NET获取这个cookie值,发现ASP.NET获取不到JS设置的cookie值,真郁闷中,以下是JS写Cookie的代码: C ...

  9. js写的复制功能，只支持IE

    如果用js写,只能支持IE,如果想全支持,需要用jQuery的插件:jquery.zclip.js 下面是用js写的: var copyHref = function(){               ...

随机推荐

  1. iOS-UICollectionViewController协议及回调

    一.UICollectionViewDataSource 1.返回Section数量的方法 - (NSInteger)numberOfSectionsInCollectionView: (UIColl ...

  2. QMetaEnum利用Qt元数据实现枚举(enum)类型值及字符串转换

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QMetaEnum利用Qt元数据实现枚举(enum)类型值及字符串转换     本文地址:ht ...

  3. Vue 自定义指令练习

    Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象 取值: <div v-demo="{ color: 'white', ...

  4. 【ASP.NET Core 】ASP.NET Core 源码学习之 Logging[1]:Introduction

    在ASP.NET 4.X中,我们通常使用 log4net, NLog 等来记录日志,但是当我们引用的一些第三方类库使用不同的日志框架时,就比较混乱了.而在 ASP.Net Core 中内置了日志系统, ...

  5. [乱搞]hdu 6406 Taotao picks apples 笛卡尔树+倍增

    题目链接 Problem Description There is an apple tree in front of Taotao's house. When autumn comes, n app ...

  6. 秒杀多线程第十四篇 读者写者问题继 读写锁SRWLock （续）

    java 包实现了读写锁的操作: package com.multithread.readwritelock; import java.util.concurrent.CountDownLatch; ...

  7. ssh-keygen的使用方法及配置authorized_keys两台linux机器相互认证

    一.概述 1.就是为了让两个linux机器之间使用ssh不需要用户名和密码.采用了数字签名RSA或者DSA来完成这个操作 2.模型分析 假设 A (192.168.20.59)为客户机器,B(192. ...

  8. 【刷题】BZOJ 2096 [Poi2010]Pilots

    Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串,任意两个难度差不会超过他设定的最大值.耍畸形一个人是 ...

  9. 跟我学Spring Cloud（Finchley版）-17-Zuul路由配置详解

    但在实际项目中,往往需要自己定义路由规则,Zuul的路由配置非常灵活.简单,本节详细讲解Zuul的路由配置. 一.自定义指定微服务的访问路径 配置zuul.routes.指定微服务的serviceId ...

  10. 【SPOJ】Count On A Tree II（树上莫队）

    [SPOJ]Count On A Tree II(树上莫队) 题面 洛谷 Vjudge 洛谷上有翻译啦 题解 如果不在树上就是一个很裸很裸的莫队 现在在树上,就是一个很裸很裸的树上莫队啦. #incl ...