這里所說的動態插入，是指用JS的append()方式追加元素內容，而不是靜態寫在HTML里面。
為什么會用到這種方式呢？比如登錄框。有些網站在大部分頁面都有登錄按鈕，如果是用Bootstrap的模態框調用的話，常規方式都是寫在HTML里面，這就不太方便后期修改，因為你一旦要修改就要動到很多個頁面！
這里也不多說什么了，先看效果圖：
這里用到的JQ版本是3.5.1，Bootstrap版本是4.6.1，先來看代碼：
1 var loginModal = " <div class=\"modal fade\" id=\"loginModal\" tabindex=\"-1\" aria-hidden=\"true\">\n"; 2 loginModal += " <div class=\"modal-dialog modal-dialog-centered\">\n"; 3 loginModal += " <div class=\"modal-content\">\n"; 4 loginModal += " <div class=\"modal-header\">\n"; 5 loginModal += " <h5 class=\"modal-title text-info\">會員登錄</h5>\n"; 6 loginModal += " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"關閉\">\n"; 7 loginModal += " <span aria-hidden=\"true\">×</span>\n"; 8 loginModal += " </button>\n"; 9 loginModal += " </div>\n"; 10 loginModal += " <div class=\"modal-body px-4\">\n"; 11 loginModal += " <form onsubmit=\"return false;\">\n"; 12 loginModal += " <div class=\"input-group mb-3\">\n"; 13 loginModal += " <div class=\"input-group-prepend\">\n"; 14 loginModal += " <span class=\"input-group-text\">\n"; 15 loginModal += " <i class=\"fas fa-mobile-alt fa-fw\"></i>\n"; 16 loginModal += " </span>\n"; 17 loginModal += " </div>\n"; 18 loginModal += " <input type=\"number\" class=\"form-control\" placeholder=\"小米運動賬號\" id=\"miPhone\">\n"; 19 loginModal += " </div>\n"; 20 loginModal += " <div class=\"input-group mb-3\">\n"; 21 loginModal += " <div class=\"input-group-prepend\">\n"; 22 loginModal += " <span class=\"input-group-text\">\n"; 23 loginModal += " <i class=\"fas fa-lock fa-fw\"></i>\n"; 24 loginModal += " </span>\n"; 25 loginModal += " </div>\n"; 26 loginModal += " <input type=\"password\" class=\"form-control\" placeholder=\"小米運動密碼\" id=\"miPassword\">\n"; 27 loginModal += " </div>\n"; 28 loginModal += " <div class=\"custom-control custom-switch\">\n"; 29 loginModal += " <input type=\"checkbox\" class=\"custom-control-input\" id=\"loginRemember\">\n"; 30 loginModal += " <label class=\"custom-control-label\" for=\"loginRemember\">記住登錄信息</label>\n"; 31 loginModal += " </div>\n"; 32 loginModal += " <p class=\"text-danger text-center py-2 mb-2\" id=\"loginTips\"></p>\n"; 33 loginModal += " <div class=\"text-center\">\n"; 34 loginModal += " <input class=\"btn btn-info\" type=\"submit\" id=\"loginSubmit\" value=\"確定登錄\">\n"; 35 loginModal += " <input class=\"btn btn-warning\" type=\"button\" id=\"loginClear\" value=\"清除信息\">\n"; 36 loginModal += " </div>\n"; 37 loginModal += " </form>\n"; 38 loginModal += " </div>\n"; 39 loginModal += " </div>\n"; 40 loginModal += " </div>\n"; 41 loginModal += " </div>"; 42 43 $("#loginBtn").click(function(){ 44 $("body").append(loginModal); //在body標簽的最底部加入模態框代碼 45 46 $('#loginModal').modal({ 47 keyboard: false, 48 backdrop: 'static' 49 }); 50 });
這樣就實現了用append()方式在body標簽的最底部追加登錄的模態框，但是有一個問題，就是你不能一直不停的往頁面里加入登錄框，所以要做一些改變：
1 var loginBox = false; //先設置一個狀態為false 2 $("#loginBtn, .login_btn").click(function(){ 3 if(loginBox == false){ //判斷狀態為false時追加 4 $("body").append(loginModal); //在body標簽的最底部加入模態框代碼 5 loginBox = true; //追加后設置狀態為true 6 } 7 $('#loginModal').modal({ 8 keyboard: false, 9 backdrop: 'static' 10 }); 11 });
這樣就解決了，然后你會遇到新的問題，就是這時候你用$("#loginSubmit").click()綁定點擊事件的時候，無效~
這時候就得換一個思路了，因為登錄模態框的內容是后面追加進去的，所以不能直接使用$("#loginSubmit").click()這種方式去綁定，可以用下面的方式：
1 // append()追加頁面之后只能用on，提交登錄信息 2 $('body').on('click','#loginSubmit',function(){ 3 var tips = $("#loginTips"); 4 tips.html(""); 5 var phone = $.trim($("#miPhone").val()); 6 var password = $.trim($("#miPassword").val()); 7 if(!/^1\d{10}$/.test(phone)){ 8 tips.html("請輸入正確的賬號"); 9 $("#miPhone").focus(); 10 return false; 11 }else if(password.length < 6){ 12 tips.html("密碼不能少於6位"); 13 $("#miPassword").focus(); 14 return false; 15 }else{ 16 $.ajax({ 17 method: 'post', 18 url: "/login", 19 dataType: "json", 20 data: {phone:phone,password:password}, 21 success: function (res) { 22 if(res.code==200){ 23 location.reload(); 24 }else{ 25 tips.html(res.msg); 26 return false; 27 } 28 }, 29 error: function (){ 30 tips.html("網絡異常"); 31 return false; 32 } 33 }); 34 } 35 });
至此，就完美解決了！可以把以上代碼放進一個公用的JS文件就可以在每個頁面調用了~
案例網址：
