新的dialog屬性目前好像就支持google瀏覽器,不過還是先嚐爲盡!別的不說先上代碼。
先看html,
<div class="container">
<h1>dialog</h1>
<button id="open-modal" type="button" class="btn">快來點我吖!</button>
<dialog id="sweet-modal">
<h3 class="modal-header">sweet modal</h3>
<div class="modal-body">
This is a new dialog!
</div>
<div class="modal-footer">
<button id="get-it" type="button">Get</button>
</div>
</dialog>
<p>
<b>returnValue:</b><span id="return-value"></span>
如:<dialog open></dialog>。
再給他加上css,
body{
font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
}
.container{
margin: 2rem;
}
.btn{
display: inline-block;
padding: 0 15px;
height: 32px;
line-height: 1.5;
font-weight: 400;
font-size: 14px;
text-align: center;
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
}
#sweet-modal{
padding: 0;
width: 478px;
text-align: center;
vertical-align: middle;
border-radius: 5px;
border: 0;
opacity: 0;
transform: scale(0.7);
transition: transform 0.25s, opacity 0.2s, -webkit-transform 0.25s;
}
#sweet-modal.modal-active {
opacity: 1;
transform: scale(1);
}
#sweet-modal + .backdrop {
background-color: rgba(0, 0, 0, 0.1);
}
.modal-header {
position: relative;
margin: 0;
padding: 39px 16px 26px;
font-size: 27px;
font-weight: 600;
text-transform: none;
line-height: normal;
text-align: center;
color: rgba(0, 0, 0, 0.65);
}
.modal-body {
position: relative;
display: block;
margin: 0;
padding: 0 0 32px;
font-weight: 400;
font-size: 16px;
line-height: normal;
vertical-align: top;
text-align: center;
color: rgba(0, 0, 0, 0.64);
overflow-wrap: break-word;
box-sizing: border-box;
}
.modal-body p {
margin: 0;
padding: 10px;
}
.modal-footer {
padding: 26px 16px 13px;
text-align: right;
border-radius: inherit;
border-top: 1px solid rgb(233, 238, 241);
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: rgb(245, 248, 250);
overflow: hidden;
}
#get-it {
padding: 10px 24px;
margin: 0;
font-weight: 600;
font-size: 14px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #7cd1f9;
cursor: pointer;
outline: none;
}
#get-it:active {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(43, 114, 165, 0.29);
background-color: #70bce0;
}
當然,除了使用屬性打開dialog框,還可以使用js。
var modal = document.getElementById('sweet-modal');
modal.showModal();
有開當然有關,
modal.close();
好了,也不賣最後的關子了,下面就是最終的js控制,加了點特效。
var modal = document.getElementById('sweet-modal');
var open = document.getElementById('open-modal');
var getIt = document.getElementById('get-it');
var returnValue = document.getElementById('return-value');
var transition;
//初始化
//dialogPolyfill.registerDialog(dialog);
//打開dialog
open.addEventListener('click',()=>{
modal.showModal();
transition = setTimeout(modal.classList.add('modal-active'),0.5);
});
// 點擊確認
getIt.addEventListener("click", () => {
modal.close("瞭解");
modal.classList.remove("modal-active");
clearTimeout(transition);
});
//顯示returnValue
modal.addEventListener('close',()=>{
returnValue.innerHTML = modal.returnValue;
});
//點擊陰影關閉
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.close('取消');
modal.classList.remove("modal-active");
clearTimeout(transition);
}
});
以上就是完整的代碼,在貼上效果圖,完美!