js 实现alert效果 msg弹窗

本文链接：https://blog.csdn.net/fareast_mzh/article/details/103021152

* alert.html

<style>
    .weui-mask {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,.6);
    }
    .weui-dialog {
        position: fixed;
        display: table;
        z-index: 5000;
        width: 80%;
        max-width: 300px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background-color: #fff;
        text-align: center;
        border-radius: 3px;
        overflow: hidden;
    }
    .theme-blue .weui-dialog {
        background-color: #f3f4f5;
        border: 1px solid #cbcbcb;
        color: #666;
    }
    .weui-dialog__hd {
        padding: 1.3em 1.6em .5em;
    }
    .weui-dialog__bd {
        padding: 0 1.6em .8em;
        min-height: 40px;
        font-size: 15px;
        line-height: 1.3;
        word-wrap: break-word;
        word-break: break-all;
        color: #999;
    }
    .theme-blue .weui-dialog .weui-dialog__bd {
        color: #333;
    }
    .weui-dialog__ft {
        position: relative;
        line-height: 48px;
        font-size: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .weui-dialog__ft .weui-dialog__btn {
        margin: 0 auto;
    }
    .weui-dialog__title {
        font-weight: 400;
        font-size: 18px;
    }
    .theme-blue .weui-dialog .weui-dialog__ft a {
        color: #3a81e5;
    }
</style>
<div class="vux-alert">
    <div id="vux-x-dialog" class="vux-x-dialog">
        <div class="weui-mask" style="display: none;"></div>
        <div class="weui-dialog" style="display: none;">
            <div class="weui-dialog__hd">
                <strong id="weui-dialog__title" class="weui-dialog__title">验证失败</strong>
            </div>
            <div class="weui-dialog__bd">
                <div id="weui-dialog__bd">出错啦！</div>
            </div>
            <div id="weui-dialog__ft" class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
            </div>
        </div>
    </div>
</div>
<script>
    function hideDialog() {
      var mask = document.querySelectorAll(".weui-mask");
      var dialog = document.querySelectorAll(".weui-dialog");
      Array.prototype.forEach.call(mask, function(m) {
        m.style.display = 'none';
      });
      Array.prototype.forEach.call(dialog, function(m) {
        m.style.display = 'none';
      });
    }

  function msg(title, content){
    if (typeof content ==="undefined") {
      content = "";
    }
    var msgTitle = document.getElementById("weui-dialog__title");
    msgTitle.innerHTML = title;

    var msgContent = document.getElementById("weui-dialog__bd");
    msgContent.innerHTML = content;

    var btn = '<a href="javascript:;" onclick="hideDialog()" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>';

    var msgBtn = document.getElementById("weui-dialog__ft");
    msgBtn.innerHTML = btn;

    var dialog = document.getElementById("vux-x-dialog");
    dialog.querySelector(".weui-mask").style.display = "block";
    dialog.querySelector(".weui-dialog").style.display = "table";
  }

  // msg("sample title", "This is test content");
</script>

实现效果如下