代码里提供了详细的注解,请仔细阅读
<!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>