分享一个原生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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容