原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

实现了一下功能：

1.title可自定义可拖拽

2.width height可以自定义

3.背景遮罩和透明度可以自定义

4.可以自己编辑弹出框里的html

5.确定取消按钮可选

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

调用方法：

 1 Prompt.add();//生成遮罩和弹出div

 2

 3

 4

 5 Prompt.init({    //修改参数

 6         title : "我是个alert弹出框",

 7         shade : true,

 8         opacity : 20,

 9         width : 800,

10         height : 150,

11      ConfirmFun : a1,

12         CancelFun : a2,

13         html : "我是个alert弹出框我是个alert弹出框我是个alert弹出框我是个alert弹出框我是个alert弹出框我是个alert弹出框!"

14     });

在线效果预览：http://jsfiddle.net/dtdxrk/A2trz/embedded/result/

<!DOCTYPE HTML>

  <html lang="en">

  <head>

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

  <title>原生Js封装的弹出框-弹出窗口-页面居中-多状态可选</title>

<style type="text/css">

  *{margin:0;padding: 0;}

  body{height: 2000px;}

  #txt {background-color: green;padding: 5px;line-height: 1.5;color: #fff;}

    div#shadeDiv{display:none;position: absolute;top: 0;left: 0; opacity: 1; filter: alpha(opacity=100);z-index: 9998;background-color: #000;}

    div#prompt{border-radius:5px; display:none;border: 1px solid #CCC; position:fixed;_position: absolute;z-index: 9999;background-color: #fff;}

    div#prompt_title{ cursor:move;border-radius:5px;font-size:14px;font-weight: bold;color: #333;padding-left:10px;height: 35px;line-height: 35px;border-bottom: 1px solid #ececec;background-color:#fcfcfc; }

    span#prompt_close{ position: absolute;right: 10px;top: 10px; cursor: pointer; background: url("bd_split_210d2d99.gif") no-repeat -281px -41px; width: 14px;height: 13px;outline: none;display: block;}

    div#prompt_body{padding: 30px 20px;font-size:13px;line-height: 1.5;}

    div#prompt_bottom{display:none;position: absolute;bottom: 15px;right: 15px;}

    div#prompt_bottom a.btn{_display:block;_float:left;border: 1px solid #888;border-radius:2px;font-size: 13px;padding: 5px 8px ;margin-left: 10px;cursor: pointer;

color: #000000;

color: #000000!important;

background: #F3F3F3;

background: -moz-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);

background: -webkit-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);

background: -o-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);

background: -ms-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d7d7d7',GradientType=0 );

background: linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);}

    div#prompt_bottom a.btn:hover{border: 1px solid blue;}

</style>

  <body>

  <div id="txt">

    <h1>需要实现的状态</h1>

    <p>1.是否有遮罩层</p>

    <p>2.是否有title</p>

    <p>3.alert & confirm</p>

    <p>4.自定义弹出框里面的html</p>

    <p>5.拖拽</p>

  </div>

<button id="bt1" style="margin-top:200px;">有遮罩的alert弹出框</button>

<button id="bt2">没有标题和遮罩的confirm弹出框</button>

  <select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6" >

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6" >

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<input type="text" class="cityinput" id="city2" value="城市名">

<select name="IE6" >

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6" >

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<br/>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6" >

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6" >

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<br/>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<br/>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<br/>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<select name="IE6">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

<button id="bt3">有确定按钮的alert弹出框</button>

<button id="bt4">自定义html内容的弹出框</button>

<script type="text/javascript">

var Prompt = {

  $ : function(id){return document.getElementById(id)},

  add : function(){ //生成div和遮罩层

    this.createShade();

    this.createPrompt();

  },

  init :function(option){

    var title = this.title = option.title || false,

        shade = this.shade = option.shade || false,  //是否显示遮罩

        opacity = this.opacity = option.opacity || 20, //遮罩透明度

        width = this.width = option.width || 500,

        height = this.height = option.height || 300,

        _temp = this._temp = option.html || "",

        ConfirmFun = this.ConfirmFun = option.ConfirmFun || false,

        CancelFun = this.CancelFun = option.CancelFun || false;

    this.editTitle();

    this.editHtml();

    if(ConfirmFun){

        this.showBottom();

    }else{

        this.hideBottom();

    }

    this.show();

  },

  editTitle : function(){   //title div生成

    var prompt_title = this.$("prompt_title");

    if(this.title){

        prompt_title.innerHTML = this.title;

        //添加拖拽方法

        this.drag();

        prompt_title.style.display = "block";

    }else{

        prompt_title.style.display = "none";

    }

  },

  editHtml : function(){

    var prompt_body = this.$("prompt_body");

    prompt_body.innerHTML = this._temp;

  },

  createPrompt : function(){    //创建弹出的div

    var doc = document,

        Div = doc.createElement("div");

    Div.id = "prompt";

    Div.innerHTML = "<span id='prompt_close'></span><div id='prompt_title'></div><div id='prompt_body'></div><div id='prompt_bottom'></div>";

    doc.body.appendChild(Div);

    var prompt_close = this.$("prompt_close");

    this.addHandler(prompt_close,"click",this.hide);

  },

  showBottom : function(){    //创建确定 取消按钮

    var that = this,

        prompt_bottom = that.$("prompt_bottom");

    if(that.CancelFun){

        prompt_bottom.innerHTML = "<a class='btn' id='ConfirmFun'>确定</a><a class='btn' id='CancelFun'>取消</a>";

        that.addHandler(that.$("ConfirmFun"),"click",function(){

            that.hide();

            that.ConfirmFun();

        });

        that.addHandler(that.$("CancelFun"),"click",function(){

            that.hide();

            that.CancelFun();

        });

    }else{

        prompt_bottom.innerHTML = "<a class='btn' id='ConfirmFun'>确定</a>";

        that.addHandler(that.$("ConfirmFun"),"click",function(){

            that.hide();

            that.ConfirmFun();

        });

    }

    prompt_bottom.style.display = "block";

  },

  hideBottom : function(){

    this.$("prompt_bottom").innerHTML = "";

    this.$("prompt_bottom").style.display = "none";

  },

  show : function(){

    var promptDiv = Prompt.$("prompt"),

        shadeDiv = Prompt.$("shadeDiv"),

        bodyHeight = document.documentElement.clientHeight  || document.body.clientHeight ;

    promptDiv.style.display = "block";

    promptDiv.style.width = this.width + "px";

    promptDiv.style.height = this.height + "px";

    promptDiv.style.left = (this.bodyWidth/2-this.width/2)+  "px";

    promptDiv.style.top = (bodyHeight/2-this.height/2) +  "px";

    if(this.shade){

        shadeDiv.style.display = "block";

        if (document.all) {

             shadeDiv.filters.alpha.opacity = this.opacity;

             shadeDiv.style.zoom = 1 ;

        }else {

             shadeDiv.style.opacity = this.opacity / 100;

        }

    }

    if(this.IE6()) promptDiv.appendChild(this.createIframe());    //ie6添加iframe

  },

  hide : function(){

    Prompt.$("prompt").style.display = "none";

    Prompt.$("shadeDiv").style.display = "none";

  },

  createShade : function(){ //创建遮罩层

    var doc = document,

        bodyWidth = this.bodyWidth = doc.documentElement.clientWidth || doc.body.clientWidth,

        bodyHeight = this.bodyHeight = doc.documentElement.scrollHeight || doc.body.scrollHeight,

        Div = doc.createElement("div");

    Div.id = "shadeDiv";

    Div.style.height = bodyHeight + "px";

    Div.style.width = bodyWidth + "px";

    Div.style.opacity = 0.2;

    if(this.IE6()) Div.appendChild(this.createIframe("shadeDiv"));    //ie6添加iframe

    doc.body.appendChild(Div);

  },

  createIframe : function(div){

    var width,height;

    if(div == "shadeDiv"){

        width = this.bodyWidth;

        height = this.bodyHeight;

    }else{

        width = this.width;

        height = this.height;

    }

    var Iframe =  document.createElement('iframe');

    Iframe.style.position = 'absolute';

    Iframe.style.zIndex = '-1';

    Iframe.style.left = '-1px';

    Iframe.style.top = 0;

    Iframe.style.border = 0;

    Iframe.style.filter = 'alpha(opacity=0)';

    Iframe.style.width = width + 'px';

    Iframe.style.height = height + 'px';

    return Iframe;

  },

  isDown : false,

  drag : function(){    //添加拖拽事件

    var that = this,

        mouseX,mouseY,objY,objX,

        prompt_title = this.$("prompt_title"),

        prompt = this.$("prompt");

    that.addHandler(prompt_title,"mousedown",function(event){

        var event = window.event || event;

        if(event.button == 0 || event.button==1){  //鼠标左键chrome=0 ie=1

            (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为

            mouseX = event.clientX;

            mouseY = event.clientY;

            objY = parseInt(prompt.style.top);

            objX = parseInt(prompt.style.left);

            that.isDown = true;

        }

    });

    that.addHandler(document,"mousemove",function(event){

        if(that.isDown){

            var event = window.event || event;

            // (!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为

            prompt.style.top = event.clientY - mouseY + objY + "px";

            prompt.style.left = event.clientX - mouseX + objX + "px";

        }

    });

    that.addHandler(document,"mouseup",function(){

       that.isDown = false;

    });

  },

  getPosition : function(obj) { //获取元素在页面里的位置和宽高

      var top = 0,

          left = 0,

          width = obj.offsetWidth,

          height = obj.offsetHeight;

      while(obj.offsetParent){

          top += obj.offsetTop;

          left += obj.offsetLeft;

          obj = obj.offsetParent;

      }

      return {"top":top,"left":left,"width":width,"height":height};

  },

  addHandler:function(node, type, handler){

       node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);

  },

  IE6 : function(){

      return !!window.ActiveXObject && !window.XMLHttpRequest;

  }

}

Prompt.add();

document.getElementById("bt1").onclick = function(){

    Prompt.init({

        title : "我是个alert弹出框",

        shade : true,

        opacity : 20,

        width : 800,

        height : 150,

        html : "我是个alert弹出框我是个alert弹出框我是个alert弹出框我是个alert弹出框我是个alert弹出框我是个alert弹出框!"

    });

}

document.getElementById("bt2").onclick = function(){

    Prompt.init({

        height: 200,

        html : "没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!",

        ConfirmFun : a1,

        CancelFun : a2

    });

}

document.getElementById("bt3").onclick = function(){

    Prompt.init({

        title : "有确定按钮的弹出框",

        height: 200,

        html : "没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!没有标题和遮罩的confirm弹出框!",

        ConfirmFun :  a1

    });

}

document.getElementById("bt4").onclick = function(){

    var str = "<h1>需要实现的状态</h1>" +

        "<p>1.是否有遮罩层</p>" +

        "<p>2.是否有title</p>" +

        "<p>3.alert & confirm</p>" +

        "<p>4.自定义弹出框里面的html</p>" +

        "<p>5.拖拽</p>" +

        "<select name='IE6'>" +

            "<option>1</option>" +

            "<option>2</option>" +

            "<option>3</option>" +

        "</select>" +

        "<br>" +

        "<h2>可以自己添加修改css样式</h2>" +

        "<iframe src='http://www.baidu.com' width='900' height='200'></iframe>" +

        "<h6>也可以自己添加方法</h6>";

    Prompt.init({

        title :"自定义html内容的弹出框",

        shade : true,

        opacity : 20,

        width :1000,

        height: 500,

        html : str

    });

}

function a1(){

    Prompt.init({

        title : "我是确认弹出框",

        shade : true,

        height : 150,

        html : "我是确认弹出框!"

    });

}

function a2(){

    Prompt.init({

        title : "我是取消的弹出框",

        shade : true,

        opacity : 20,

        width : 200,

        height : 150,

        html : "我是取消的弹出框"

    });

}

</script>

</body>

</html>

分类: Js封装的插件/实例/方法

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选的更多相关文章

原生JS封装Ajax插件(同域&amp&semi;&amp&semi;jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
原生JS封装简单动画效果
原生JS封装简单动画效果一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构废话不多说,展示代码. ...
基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
原生Js封装的动画类
算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画放大 ...
用原生js封装轮播图
原生js封装轮播图对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

随机推荐

java String 中用&quot&semi;+&quot&semi;拼接字符串的原理
之前看<thinkinjava>时记得书上分析国这个问题,然后面试的时候问道了,结果面试官说时的很含糊说是new了一个对象,我说底层用的Stringbuild.他还是说我说错了.谨以此文的 ...
C++混合编程之idlcpp教程Python篇(8)
上一篇在这 C++混合编程之idlcpp教程Python篇(7) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程PythonTutorial6中,同样加入了四个文件:Pyt ...
如何用 freebayes call SNP
1,软件介绍 FreeBayes is a Bayesian genetic variant detector designed to find small polymorphisms, specif ...
迷你template
JavaScript Micro-Templatinghttp://ejohn.org/blog/javascript-micro-templating/ //Simple JavaScript ...
【转】23种设计模式UML图
原文:http://blog.csdn.net/bwwlpnn/article/details/7421628
sql语句的截取字符串下标是从1开始
这里的指的sqliter数据库 substr函数 substr(date,1,10)
MySQL基本语法(一)：和SQL Server语法的差异小归纳
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
ReactiveSwift源码解析(三) Signal代码的基本实现
上篇博客我们详细的聊了ReactiveSwift源码中的Bag容器,详情请参见<ReactiveSwift源码解析之Bag容器>.本篇博客我们就来聊一下信号量,也就是Signal的的几种状 ...
第五周学习总结-HTML5
2018年8月12日暑假第五周,我把HTML剩余的一些标签和用法看完了并学了一些HTML5的标签及用法. HTML5比HTML多了一些元素,也删去了一些元素. HTML5新增元素图形元素 < ...
vagrant设置虚拟机的名字
如果我们不在vagrant init 命令生成的vagrantfile文件中声明虚拟机的名字的话,一般会默认给我们指定一个名字,指定的方法: config.vm.provider "virt ...