* 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>
实现效果如下
注意对话框 display:table; 不是block
否则会成一个长条从顶部一直拉到底部