const defer = () => {
const def = {}
def.promise = new Promise((resolve, reject) => {
def.resolve = resolve
def.reject = reject
})
return def
}
<html>
<head>
<title>defer promise</title>
<style>
.dialog {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
position: fixed;
align-items: center;
pointer-events: none;
justify-content: center;
}
.dialog .mask {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: 0.3s;
background-color: rgba(0, 0, 0, 0.4);
}
.dialog-content {
padding: 20px;
transition: 0.2s;
opacity: 0;
transform: scale(0.95);
background-color: #fff;
}
.dialog.visible {
pointer-events: all;
}
.dialog.visible .mask {
opacity: 1;
}
.dialog.visible .dialog-content {
opacity: 1;
transform: scale(1);
}
</style>
</head>
<body>
<div class="container">
<button id="control">show modal</button>
<div class="dialog" id="dialog">
<div class="mask" onclick="this.parentNode.classList.remove('visible')"></div>
<div class="dialog-content">
<input type="text" id="content" />
<button id="confirm">sure</button>
</div>
</div>
</div>
<script>
const defer = () => {
const def = {}
def.promise = new Promise((resolve, reject) => {
def.resolve = resolve
def.reject = reject
})
return def
}
; (() => {
const inputEl = document.getElementById('content')
const dialogEl = document.getElementById('dialog')
dialogEl.show = () => dialogEl.classList.add('visible')
dialogEl.hide = () => dialogEl.classList.remove('visible')
const dialogController = () => {
let dfd = null
const confirmBtn = document.getElementById('confirm')
confirmBtn.addEventListener('click', () => {
dialogEl.hide()
dfd.resolve(inputEl.value)
})
return () => {
dfd = defer()
dialogEl.show()
return dfd.promise
}
}
const openDialog = dialogController()
const controlBtn = document.getElementById('control')
controlBtn.addEventListener('click', async () => {
const message = await openDialog()
console.log('弹窗输入框信息:', message)
})
})()
</script>
</body>
</html>