Description: individually packaged can remain alert and comfirm ui design draft, the way to maintain compatibility with other browsers ui unity.
Idea: to directly cover the browser's default alert and confirm methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试4</title>
</head>
<style>
body {
background-image: url(http://www.cnr.cn/xjfw/btfw/2011btfw/jkwh/jkwt/20160516/W020160516492035673595.jpg);
background-repeat: none;
background-size: auto;
}
#alert-eject-frame-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .4);
z-index: 2147483646;
}
#alert-eject-frame-content {
position: absolute;
top: 42%;
left: calc(50% - 120px);
width: 240px;
background-color: #fff;
z-index: 2147483647;
border-radius: 5px;
text-align: center;
animation: showAlert .5s ease;
-webkit-animation: showAlert .5s ease;
}
@keyframes showAlert {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes showAlert
/*Safari and Chrome*/
{
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
.alert-eject-frame-txt {
padding: 20px;
font-size: 1.04rem;
}
.alert-eject-frame-buttom-cancel {
height: 50px;
line-height: 50px;
border-top: 1px solid #e5e5e5;
font-size: 1.04rem;
color: rgb(105, 101, 101);
cursor: pointer;
}
.alert-eject-frame-buttom-flex {
display: flex;
height: 50px;
line-height: 50px;
border-top: 1px solid #e5e5e5;
font-size: 1.04rem;
color: rgb(105, 101, 101);
cursor: pointer;
}
.alert-eject-frame-buttom-flex div {
flex: 1;
}
.alert-eject-frame-buttom-flex div:nth-child(1) {
border-right: 1px solid #e5e5e5;
}
</style>
<body>
<div onclick="alert('默认alert')">默认alert</div>
<br />
<br />
<div onclick="alert('alert点击遮罩也可以关闭',null,null,1,null)">alert点击遮罩也可以关闭</div>
<br />
<br />
<div onclick="alert('alert自定义弹框宽度',null,null,1,400)">alert自定义弹框宽度</div>
<br />
<br />
<div onclick="confirm('默认confirm','closeConfirmtEjectFrame')">默认confirm</div>
<br />
<br />
<div onclick="confirm('confirm点击遮罩也可以关闭','closeConfirmtEjectFrame',1)">confirm点击遮罩也可以关闭</div>
<br />
<br />
<div onclick="confirm('confirm自定义弹框宽度','closeConfirmtEjectFrame',1,400)">confirm自定义弹框宽度</div>
</body>
<script>
// confirm事件处理
function closeConfirmtEjectFrame(i) {
if (i) {
alert(`点击了确认`)
} else {
alert(`点击了取消`)
}
// 关闭弹窗
closeAlertEjectFrame()
}
/*
* txt：必填，要显示的内容
* callback：回调
* confirm：确认按钮
* closeMask：点击遮罩也可以关闭
* lertWidth: 弹框宽度
*/
window.alert = function (txt, callback, confirm, closeMask, alertWidth) {
// 是否需要确认按钮
let confirmHTML = ``
if (confirm) {
confirmHTML = `
<div class="alert-eject-frame-buttom-flex">
<div onclick="closeAlertEjectFrame(0)">取消</div>
<div onclick="closeAlertEjectFrame(1)">确认</div>
</div>`
} else {
confirmHTML = `<div onclick="closeAlertEjectFrame()" class="alert-eject-frame-buttom-cancel">取消</div>`
}
// body插入节点
CADN(`body`).innerHTML += `
<div id="alert-eject-frame-mask" ${closeMask ? `onclick="closeAlertEjectFrame()"` : ``}></div>
<div id="alert-eject-frame-content">
<div class="alert-eject-frame-txt">${txt}</div>
${confirmHTML}
</div>
`
// 定时器时间匹配css的animate动画执行时间
alertEjectFrameSettimeout(alertWidth)
callback && callback()
}
/*
* txt：必填，要显示的内容
* btn：确认/取消按钮 方法名称
* closeMask：点击遮罩也可以关闭
* lertWidth: 弹框宽度
*/
window.confirm = function (txt, btn, closeMask, alertWidth) {
// body插入节点
CADN(`body`).innerHTML += `
<div id="alert-eject-frame-mask" ${closeMask ? `onclick="closeConfirmtEjectFrame()"` : ``}></div>
<div id="alert-eject-frame-content">
<div class="alert-eject-frame-txt">${txt}</div>
<div class="alert-eject-frame-buttom-flex">
<div onclick="${btn}(false)">取消</div>
<div onclick="${btn}(true)">确认</div>
</div>
</div>
`
// 定时器时间匹配css的animate动画执行时间
alertEjectFrameSettimeout(alertWidth)
}
// 计算弹框宽高，居中布局
function alertEjectFrameSettimeout(alertWidth) {
// 定时器时间匹配css的animate动画执行时间
setTimeout(() => {
let domHeight = CADN().clientHeight // 弹框高度
let screenHeight = document.documentElement.clientHeight || document.body.clientHeight // 浏览器可视区域高度
CADN().style.top = `${(screenHeight - domHeight) / 2}px` // 使得弹框垂直居中
if (alertWidth) { // 弹框宽度
let screenWidth = document.documentElement.clientWidth || document.body.clientWidth // 浏览器可视区域高度
CADN().style.width = `${alertWidth}px` // 设置弹框宽度
CADN().style.left = `${(screenWidth - alertWidth) / 2}px` // 弹框垂直居中
}
}, .5);
}
function CADN(i) {
return i ? document.querySelector(i) : document.querySelector(`#alert-eject-frame-content`)
}
// 关闭弹窗
function closeAlertEjectFrame(i) {
CADN(`#alert-eject-frame-mask`).remove()
CADN(`#alert-eject-frame-content`).remove()
}
</script>
</html>
复制代码