JQuery動態插入Bootstrap模態框（Modal）

阿新 • • 發佈：2021-11-12

這裡所說的動態插入，是指用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 });