JSFiddle - React, Tailwind, and code Playground

HTML

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

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("http://images.cnitblog.com/blog/150659/201308/12213040-24db4f5be00e447a852649af3df86cb1.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;}

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();
           ...