代碼裏提供了詳細的註解,請仔細閱讀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button">button</button>
<script>
document.querySelector("button").addEventListener("click",ff)
function ff() {
function commitResult() { // 要出發的函數
alert("提交成功");
this.parentNode.parentNode.parentNode.style.display = "none"; //這裏時爲了獲得 modal_bc;
}
create_modal(false,"你確定要提交該單詞麼",commitResult)
}
/*
* params:
* alert_or_confirm type:true or false
* modal_content type:String
* confirm_trigger_function type:function
* 注意:confirm_tirrger_function 裏最後異步:必須關閉模態框
* 因加上這段代碼:
* this.parentNode.parentNode.parentNode.style.display = "none"; //這裏時爲了獲得 modal_bc;
*
* */
function create_modal(alert_or_confirm,modal_contents,confirm_trigger_function) {
let modal_bg = document.createElement("div");
let modal_container = document.createElement("div");
let modal_title = document.createElement("div");
let modal_content = document.createElement("div");
let modal_footer = document.createElement("div");
//設置id
modal_bg.setAttribute("id","modal_bg");
modal_container.setAttribute("id","modal_container");
modal_title.setAttribute("id","modal_title");
modal_content.setAttribute("id","modal_content");
modal_footer.setAttribute("id","modal_footer");
//設置樣式
modal_bg.style.cssText="display:block;" +
"background-color: rgba(0,0,0,0.4);" +
"position:fixed;" +
"top:0;" +
"bottom:0;" +
"right:0;" +
"left:0;";
modal_container.style.cssText="background-color:white;" +
"width:500px;" +
"height:300px;" +
"margin:10% auto;";
modal_title.style.cssText="color:white;" +
"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
"width:100%;" +
"height:50px;"+
"line-height:50px;";
modal_content.style.cssText="color:black;" +
"text-align:center;" +
"width:100%;" +
"height:190px;" +
"border-bottom:2px solid grey";
modal_footer.style.cssText="padding:14px 15px 15px;" +
"color:white;" +
"width:100%;" +
"height:60px;";
modal_container.appendChild(modal_title);
modal_container.appendChild(modal_content);
modal_container.appendChild(modal_footer)
modal_bg.appendChild(modal_container);
//將整個模態框添加到body中
document.body.appendChild(modal_bg);
//給模態框添加相應的內容
// modal_title.innerHTML="This is a modal title";
modal_content.innerHTML = modal_contents;
// modal_footer.innerHTML = "This is a modal footer";
// 製作關閉按鈕
let close_button = document.createElement("span");
close_button.innerHTML = "×";
close_button.setAttribute("id","modal_close_button")
close_button.style.cssText=" margin-right:8px;" +
"line-height:50px;" +
"color: #aaa;" +
"float: right;" +
"font-size: 28px;" +
"font-weight: bold;";
close_button.onmouseover=function(event){
close_button.style.color = "black";
event =event||window.event;
event.stopPropagation();
}
document.onmouseover = function(){
document.getElementById("modal_close_button").style.color = "#aaa";
}
close_button.addEventListener("click",function () {
modal_bg.style.display = "none"
})
modal_title.appendChild(close_button);
//製作確定按鈕和取消按鈕
let confirm_button = document.createElement("div");
let cancel_button = document.createElement("div");
confirm_button.style.cssText="border-radius:5px;" +
"color:white;" +
"text-align:center;" +
"line-height:20px;" +
"font-size:17px;" +
"float:right;" +
"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
"padding:5px;" +
"margin-right:30px;";
cancel_button.style.cssText="border-radius:5px;" +
"color:white;" +
"text-align:center;" +
"line-height:20px;" +
"font-size:17px;" +
"float:right;" +
"background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);" +
"padding:5px;" +
"margin-right:30px;";
confirm_button.innerHTML = "確定";
cancel_button.innerHTML = "取消";
if(alert_or_confirm){
modal_footer.appendChild(confirm_button);
}else {
modal_footer.appendChild(confirm_button);
modal_footer.appendChild(cancel_button);
}
//添加相應的事件
cancel_button.addEventListener("click",function () {
modal_bg.style.display = "none"
});
confirm_button.addEventListener("click",confirm_trigger_function);
}
</script>
</body>
</html>