分享一个原生js弹窗

html部分

  <div class="mian_bg" id="confirm">
            <div class="msgout" id="msgout">
                    <div id="off_notices">×</div>
                    <div class="title" id="title">
                        
                    </div>
                        <div class="content">
                                <div id="msg">
                                        
                                </div>
                        </div>
                        <div class="chooseItem">
                            <span class="no" id="no"></span>
                            <span class="ok" id="ok"></span>
                        </div>
        </div>
    </div>      

css 部分

  .mian_bg{
      position: fixed;
      background: rgba(0,0,0,.25);
      width:100%;
      height:0;
      top:0;
      left: 0;
      cursor: no-drop;
      z-index: 99;
      opacity: 0;
      transition: opacity .3s;
      overflow: hidden;
  }
  .mian_bg_op{
      opacity: 1;
      height:100%;
  }
  .msgout{
      position: absolute;
      left: 50%;
      top:50%;
      box-shadow: 1px 1px 50px rgba(0,0,0,.3);
      background: #fff;
      border-radius: 8px;
      cursor:auto;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      min-height: 280px;
      min-width: 500px;
      height: auto !important;
      max-width: 70%;
  }
  .msgout.reset{
      left: 50%;
      top:50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
  }
  .msgout>.title{
height:58px;
width:auto;
text-align: center;
line-height: 58px;
border-bottom: 2px solid #48a2f3;
border-radius: 8px 8px 0 0;
color:#48a2f3;
font-size: 16px;
}
  .msgout>.content{
height:162px;
display: table;
width:100%;
font-weight: bold;
border-radius: 8px !important;
  }
  .msgout input[type=text],.msgout input[type=password]{
width:330px;
height: 50px;
border:0 none;
border-radius: 8px;
padding-left: 20px;
outline: none;
background: #f9f9f9;
transition: .5s;
  }
  .msgout>.content>div ul li{
line-height: 60px;
  }
  .msgout>.content abbr.color_48a2f3{
color:#48a2f3;
  }
  .msgout>.content abbr.color_red{
color:#f55d5d;
  }
  .msgout b{
padding:0 10px;
font-size: 14px;
  }
  .msgout>.content>div{
      border-radius: 8px !important;
      word-break:break-all;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding:12px 0px;
      line-height: 24px;
      max-height: 460px;
  }
  .msgout>.content>div .onlinemoney li{
      text-align: left;
      line-height: 40px;
      padding-left: 50px;
  }

js部分

window.alert = function(a,b,c,d,e,f,g,h){
'use strict';
/*如需要回调方法，以上参数均为必填参数*/
a = a || ''; //文本提示。
b = b || '温馨提示';     // title。
c = c || '确定';  // 成功状态。
d = d || false;  // 取消按钮。
e = e || '取消';   //取消按钮文案。
f = f || '';  //成功状态的回调。
g = g || '';  //失败状态的回调。
h = h || ''; //核心功能（string/function/object。
let back_to_state = /back_to_state/;
let confirm = document.querySelector('#confirm');
let msgout = confirm.querySelector('#msgout');
let ok = confirm.querySelector('#ok');
let no = confirm.querySelector('#no');
//confirm.style.display = 'block';
confirm.classList.add('mian_bg_op');
if(b!=='noHead'){
    confirm.querySelector('#title').style.display = 'block';
    confirm.querySelector('#title').innerHTML = b;//title文案
    msgout.style.minHeight = '280px';
}else{
    confirm.querySelector('#title').style.display = 'none';
    msgout.style.minHeight = '220px';
}
confirm.querySelector('#msg').innerHTML = a;//弹层信息
if(a.indexOf('hide_scroll')>-1){
    confirm.querySelector('#msg').style.display = 'block';
    confirm.querySelector('#msg').style.overflowY = 'scroll';
}else{
    confirm.querySelector('#msg').style.display = 'table-cell';
    confirm.querySelector('#msg').style.overflowY = 'auto';
}
if(back_to_state.test(a)){
    if(confirm.querySelector('#back_to_state')){
        let to_state = confirm.querySelector('#back_to_state');
        if((typeof h === "function")){
            to_state.onclick = h(confirm);
        }else if(typeof h === "object"){
            to_state.onclick = h.way(confirm);
        }
    }
}
ok.innerText = c;//确认键
if(d){
    no.style.display = 'block';
    no.innerText = e;
    no.onclick = ()=>{
        if((typeof g === "function") && d){setTimeout(()=>{g()})}
        confirm.classList.remove('mian_bg_op');
    }
    ok.classList.remove('onlySure');
}else{
    no.style.display = 'none';
    ok.classList.add('onlySure');
}
confirm.querySelector('#ok').onclick = ()=>{
    if(h == '' || typeof h === "function"){
        confirm.classList.remove('mian_bg_op');
    }else if(typeof h === "object"){
        if(h.validation){ //开启验证模式。
            confirm.classList.add('mian_bg_op');
        }else{
            confirm.classList.remove('mian_bg_op');
        }
    }else{
        confirm.classList.add('mian_bg_op');
    }
    if((typeof f === "function") && c){setTimeout(()=>{f(confirm)})}
}
if(arguments.length>7 && typeof h !== "function"){
    confirm.querySelector('#off_notices').style.display = 'block';
    confirm.querySelector('#off_notices').onclick = () =>{
        confirm.classList.remove('mian_bg_op');
        if(typeof h === "object"){
            if(h.clear){
                h.clear();
            }
        }
    }
}else{
    confirm.querySelector('#off_notices').style.display = 'none';
}
  }

调用方式

  alert('hello world'); //直接调用

  alert(html,'温馨提示')；//插入dom 标签

  alert(content,title,'回调成功的文案'，'是否显示取消按钮（布尔值）'，'取消事文案’，'回调成功的响应（fucntion）','回调失败的响应'，'核心函数（回调内容区的一些操作（比如dom等，类型function/object））');

aaaa
aaaa