如何制作一份漂亮的alert弹出框？

在web项目中，往往会用到alert弹出框，但是原生的js弹出框样式丑陋无法满足你的需求，这时你该怎么办呢？

我的做法是：重写window.alert方法。它的好处是不依赖其他组件，灵活方便，自由度高。

效果图：

废话不多说，直接附代码，将下面的代码粘贴到你的js里面：

//重写alert方法window._alert = function(msg1,msg2,msg3,msg4,callback) {var div = document.createElement("div");div.innerHTML = "<style type=\"text/css\">"+ ".alrMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       "+ ".alrMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            "+ ".alrDialog { position: fixed; z-index: 5000; width: 80%; max-width: 380px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"+ ".alrDialog .alrDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         "+ ".alrDialog .alrDialogHd .alrDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           "+ ".alrDialog .alrDialogBT { padding: 0 .27rem; font-size: 18px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          "+ ".alrDialog .alrDialogNR { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          "+ ".alrDialog .alrDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          "+ ".alrDialog .alrDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               "+ ".alrDialog .alrDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #0183FC; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       "+ ".alrDialog .alrDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             "+ ".alrDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"+ "</style>"+ "<div id=\"dialogs2\" style=\"display: none\">"+ "<div class=\"alrMask\"></div>"+ "<div class=\"alrDialog\">"+ "    <div class=\"alrDialogHd\">"+ "        <strong class=\"alrDialogTitle\"></strong>"+ "    </div>"+ "    <div class=\"alrDialogBT\" id=\"dialog_msg1\" style=\"text-align: center;height: 50px;\">弹窗标题</div>"+ "    <div class=\"alrDialogHd\">"+ "    <div class=\"alrDialogHd\">"+ "        <strong class=\"alrDialogTitle\"></strong>"+ "    </div>"+ "    <div class=\"alrDialogNR\" id=\"dialog_msg2\" style=\"text-align: left;height: 30px;\">弹窗内容，告知当前状态、信息和解决方法，描述文字</div>"+ "    <div class=\"alrDialogHd\">"+ "        <strong class=\"alrDialogTitle\"></strong>"+ "    </div>"+ "    <div class=\"alrDialogNR\" id=\"dialog_msg3\" style=\"text-align: left;height: 30px;\">弹窗内容，告知当前状态、信息和解决方法，描述文字</div>"+ "    <div class=\"alrDialogHd\">"+ "        <strong class=\"alrDialogTitle\"></strong>"+ "    </div>"+ "    <div class=\"alrDialogNR\" id=\"dialog_msg4\" style=\"text-align: left;height: 50px;\">弹窗内容，告知当前状态、信息和解决方法，描述文字</div>"+ "    <div class=\"alrDialogHd\">"+ "        <strong class=\"alrDialogTitle\"></strong>"+ "    </div>"+ "    <div class=\"alrDialogFt\">"+ "        <a href=\"javascript:;\" class=\"alrDialogBtn alrDialogBtnPrimary\" id=\"dialog_ok2\" style='background-color: lavender'>确定</a>"+ "    </div></div></div>";document.body.appendChild(div);var dialogs2 = document.getElementById("dialogs2");dialogs2.style.display = 'block';var dialog_msg1 = document.getElementById("dialog_msg1");dialog_msg1.innerHTML = msg1;var dialog_msg2 = document.getElementById("dialog_msg2");dialog_msg2.innerHTML = msg2;var dialog_msg3 = document.getElementById("dialog_msg3");dialog_msg3.innerHTML = msg3;var dialog_msg4 = document.getElementById("dialog_msg4");dialog_msg4.innerHTML = msg4;var dialog_ok2 = document.getElementById("dialog_ok2");dialog_ok2.onclick = function() {dialogs2.style.display = 'none';callback();};};

调用alert方法：

//调用_alert弹出框
var msg1="提示";
var msg2="温馨提示：";
var msg3="您乘坐的888次航班已到达火星空间站，";
var msg4="请带好您的随身物品做好下机准备。";
window._alert(msg1,msg2,msg3,msg4);

希望本篇文章对您有用，书写不易，劳烦动用您有爱的小手点个赞，谢谢！