動態建立模態框（彈窗）
阿新 • • 發佈：2019-02-01
程式碼裡提供了詳細的註解，請仔細閱讀
<!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>