bootstrap3 modal初始化加载的问题

最新推荐文章于 2026-05-03 11:55:03 发布

原创最新推荐文章于 2026-05-03 11:55:03 发布 · 957 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#modal缓存 bootstrap3modal 清空modal数据

bootstrap3 专栏收录该内容

1 篇文章

订阅专栏

本文讨论了在使用Bootstrap3 Modal时遇到的初始化加载问题，强调了解决方案是在弹出Modal前清空其内部控件的样式和内容，确保每次显示都是干净的状态。

效果如图
在这里插入图片描述
modal部分代码

<div class="modal fade " tabindex="-1" id="updatePassModal">
    <div class="modal-dialog" style="width: 400px">
        <div class="modal-content">
            <div class="modal-header">
                <h3>修改密码</h3>
            </div>
            <div class="modal-body">
                <form role="form" class="form-group-sm" id="form1">
                    <div>
                        <label for="oriPass">原密码</label>
                        <input class="form-control" id="oriPass" type="password" required="required" autofocus="autofocus"/>
                    </div>
                    <div>
                        <label for="newPass1">新密码</label>
                        <input class="form-control" id="newPass1" type="password" onblur="checkNewPass()" required="required"/>
                        <span id="span2"></span>
                    </div>
                    <div>
                        <label for="newPass2">再次输入</label>
                        <input class="form-control" id="newPass2" type="password" required="required"/>
                    </div>
                    <span id="span3"></span>
                </form>
                <span id="span4" class="row text-center"></span>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary btn-sm" id="updatePass">确认</button>
                <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

js代码

<script>
    $("#btn_updatePass").click(function(){
    	***//modal框加载之前，将modal框中所有的输入控件的样式和内容清空***
        $("#updatePassModal").on("show.bs.modal",function(){
            $("#oriPass").val("");
            $("#newPass1").val("");
            $("#newPass2").val("");
            $("#span2").prop("class","").text("");
            $("#span3").prop("class","").text("");
            $("#span4").prop("class","").text("");
        }).modal("show");
    });
    $("#updatePass").click(function(){
        $("#span4").prop("class","").val("");
        if(checkNewPassAgain()){
            $.ajax({
                url:"${pageContext.request.contextPath}/sysUser/updatePass",
                data:{
                    oriPass:$("#oriPass").val(),
                    newPass1:$("#newPass1").val(),
                    sysUserId:${ sessionScope.sysUser.sysUserId }
                },
                type:"get",
                success:function(result){
                    if (result == "1"){
                    	**//更新成功后2秒，隐藏modal框**
                        $("#span4").prop("class","glyphicon glyphicon-ok").text("密码更改成功");
                        setInterval(function(){
                            $("#updatePassModal").modal("hide");
                        },2000);
                    }else{
                        $("#span4").prop("class","glyphicon glyphicon-remove").text("密码更改失败");
                        $("#newPass1").val("");
                        $("#newPass2").val("");
                        $("#oriPass").val("").focus();
                    }
                },
            });
        }
    });
</script>

需要注意的就是在弹出modal框之前，将内部控件的样式和内容清空即可。