JQuery动态插入Bootstrap模态框（Modal）_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: python基础目录下一篇:C++ getline()面向行的输入

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

发布时间：2022-06-30 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了JQuery动态插入Bootstrap模态框（Modal），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

这里也不多说什么了，先看效果图：

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

这里用到的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(!/^1d{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 });