JQuery动态插入Bootstrap模态框(Modal)

互联网那些事 专栏收录该内容
1 篇文章 0 订阅

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

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

这里也不多说什么了,先看效果图:

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

var loginModal = "    <div class=\"modal fade\" id=\"loginModal\" tabindex=\"-1\" aria-hidden=\"true\">\n";
loginModal += "        <div class=\"modal-dialog modal-dialog-centered\">\n";
loginModal += "            <div class=\"modal-content\">\n";
loginModal += "                <div class=\"modal-header\">\n";
loginModal += "                    <h5 class=\"modal-title text-info\">会员登录</h5>\n";
loginModal += "                    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"关闭\">\n";
loginModal += "                        <span aria-hidden=\"true\">×</span>\n";
loginModal += "                    </button>\n";
loginModal += "                </div>\n";
loginModal += "                <div class=\"modal-body px-4\">\n";
loginModal += "                    <form onsubmit=\"return false;\">\n";
loginModal += "                        <div class=\"input-group mb-3\">\n";
loginModal += "                            <div class=\"input-group-prepend\">\n";
loginModal += "                                <span class=\"input-group-text\">\n";
loginModal += "                                    <i class=\"fas fa-mobile-alt fa-fw\"></i>\n";
loginModal += "                                </span>\n";
loginModal += "                            </div>\n";
loginModal += "                            <input type=\"number\" class=\"form-control\" placeholder=\"小米运动账号\" id=\"miPhone\">\n";
loginModal += "                        </div>\n";
loginModal += "                        <div class=\"input-group mb-3\">\n";
loginModal += "                            <div class=\"input-group-prepend\">\n";
loginModal += "                                <span class=\"input-group-text\">\n";
loginModal += "                                    <i class=\"fas fa-lock fa-fw\"></i>\n";
loginModal += "                                </span>\n";
loginModal += "                            </div>\n";
loginModal += "                            <input type=\"password\" class=\"form-control\" placeholder=\"小米运动密码\" id=\"miPassword\">\n";
loginModal += "                        </div>\n";
loginModal += "                        <div class=\"custom-control custom-switch\">\n";
loginModal += "                            <input type=\"checkbox\" class=\"custom-control-input\" id=\"loginRemember\">\n";
loginModal += "                            <label class=\"custom-control-label\" for=\"loginRemember\">记住登录信息</label>\n";
loginModal += "                        </div>\n";
loginModal += "                        <p class=\"text-danger text-center py-2 mb-2\" id=\"loginTips\"></p>\n";
loginModal += "                        <div class=\"text-center\">\n";
loginModal += "                            <input class=\"btn btn-info\" type=\"submit\" id=\"loginSubmit\" value=\"确定登录\">\n";
loginModal += "                            <input class=\"btn btn-warning\" type=\"button\" id=\"loginClear\" value=\"清除信息\">\n";
loginModal += "                        </div>\n";
loginModal += "                    </form>\n";
loginModal += "                </div>\n";
loginModal += "            </div>\n";
loginModal += "        </div>\n";
loginModal += "    </div>";

$("#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文件就可以在每个页面调用了~

案例网址:

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

桥巩

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值