JQuery动态插入Bootstrap模态框（Modal）

这里所说的动态插入，是指用JS的append()方式追加元素内容，而不是静态写在HTML里面。

为什么会用到这种方式呢？比如登录框。有些网站在大部分页面都有登录按钮，如果是用Bootstrap的模态框调用的话，常规方式都是写在HTML里面，这就不太方便后期修改，因为你一旦要修改就要动到很多个页面！

这里也不多说什么了，

先看效果图：

这里用到的JQ版本是3.5.1，Bootstrap版本是4.6.1，先来看代码：

var loginModal = "    
\n";
loginModal += "        
\n";
loginModal += "            
\n";
loginModal += "                
\n";
loginModal += "                    
会员登录
\n";
loginModal += "                    \n";
loginModal += "                        ×\n";
loginModal += "                    \n";
loginModal += "                
\n";
loginModal += "                
\n";
loginModal += "                    
\n";
loginModal += "                        
\n";
loginModal += "                            
\n";
loginModal += "                                \n";
loginModal += "                                    \n";
loginModal += "                                \n";
loginModal += "                            
\n";
loginModal += "                            \n";
loginModal += "                        
\n";
loginModal += "                        
\n";
loginModal += "                            
\n";
loginModal += "                                \n";
loginModal += "                                    \n";
loginModal += "                                \n";
loginModal += "                            
\n";
loginModal += "                            \n";
loginModal += "                        
\n";
loginModal += "                        
\n";
loginModal += "                            \n";
loginModal += "                            记住登录信息\n";
loginModal += "                        
\n";
loginModal += "                        
\n";
loginModal += "                        
\n";
loginModal += "                            \n";
loginModal += "                            \n";
loginModal += "                        
\n";
loginModal += "                    
\n";
loginModal += "                
\n";
loginModal += "            
\n";
loginModal += "        
\n";
loginModal += "    
";
 
$("#loginBtn").click(function(){
    $("body").append(loginModal); //在body标签的最底部加入模态框代码
 
    $('#loginModal').modal({
        keyboard: false,
        backdrop: 'static'
    });
});

这样就实现了用append()方式在body标签的最底部追加登录的模态框，但是有一个问题，就是你不能一直不停的往页面里加入登录框，所以要做一些改变：

var loginBox = false; //先设置一个状态为false
$("#loginBtn, .login_btn").click(function(){
    if(loginBox == false){ //判断状态为false时追加
        $("body").append(loginModal); //在body标签的最底部加入模态框代码
        loginBox = true; //追加后设置状态为true
    }
    $('#loginModal').modal({
        keyboard: false,
        backdrop: 'static'
    });
});

这样就解决了，然后你会遇到新的问题，就是这时候你用$("#loginSubmit").click()绑定点击事件的时候，无效~

这时候就得换一个思路了，因为登录模态框的内容是后面追加进去的，所以不能直接使用$("#loginSubmit").click()这种方式去绑定，可以用下面的方式：

// append()追加页面之后只能用on，提交登录信息
$('body').on('click','#loginSubmit',function(){
    var tips = $("#loginTips");
    tips.html("");
    var phone = $.trim($("#miPhone").val());
    var password = $.trim($("#miPassword").val());
    if(!/^1\d{10}$/.test(phone)){
        tips.html("请输入正确的账号");
        $("#miPhone").focus();
        return false;
    }else if(password.length < 6){
        tips.html("密码不能少于6位");
        $("#miPassword").focus();
        return false;
    }else{
        $.ajax({
            method: 'post',
            url: "/login",
            dataType: "json",
            data: {phone:phone,password:password},
            success: function (res) {
                if(res.code==200){
                    location.reload();
                }else{
                    tips.html(res.msg);
                    return false;
                }
            },
            error: function (){
                tips.html("网络异常");
                return false;
            }
        });
    }
});

至此，就完美解决了！可以把以上代码放进一个公用的JS文件就可以在每个页面调用了~

案例网址：