如何禁用Bootstrap的模态框，让它不弹出

Question

问题描述

使用Bootstrap模态框插件写了一个模态框，现在我对input的值进行判断，判断失败，让模态框禁用不弹出，请问该如何禁用模态框的弹出。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<div class="modal fade" id="Modal10" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >

            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            因子区间
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div>
                            <lable>请填写因子：</lable>
                                <span id="yzMin"></span>    
                                <input type="text" placeholder="例：-20，-10，10，20" id="number">
                                <span id="yzMax"></span>
                                <span id="yzName" style=" visibility:hidden; "></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="fangBtn1" class="btn btn-primary" onclick="addYZ()"  data-toggle="modal" data-target="#Modal11" >提交</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
        <!--  -->
        <div class="modal fade" id="Modal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel" style="float:left">
                            CPK分析
                        </h4>
                        <button type="button" class="btn btn-default" style="background-color:#337ab7;color:#fff;margin-top:3px;float:right" id="btn_upload7" >下载文件</button>
                    </div>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

show.bs.modal ： This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

在modal显示前会先触发show.bs.modal事件，所以试试在阻止事件e.preventDefault();或调用$('#Modal10').modal('hide');

$('#Modal10').on('show.bs.modal', function (e) {

//$('#Modal10').modal('hide');

or

//e.preventDefault();

})

Answer 2

不要用给某个节点data-target = '#Modal10'的方法来开启模态框
采用下面的方式

if(input){    // 判断成功弹出
 $('#Modal10').modal('show');
}

Answer 3

$('#Modal10').modal('hide');

Answer 4

//先写了一个点击事件，防止默认情况下点击
function addYZ(){
            var number = $("#number").val();
            if(number == "" || number.replace(/\s*/g, "") == "") {
                alert("请填写因子");
                $("#btn_upload8").attr("disabled", "disabled")
            } else {
                $("#btn_upload8").removeAttr("disabled")
                }              
            names=$("#yzName").html();
            var data={
                        id:id,
                        name:names
               }                         
                };
        //再写了一个事件监听，解除禁用状态        
                $("#number").change(function() {
                    var number = $("#number").val();
                    if(number == "" || number.replace(/\s*/g, "") == "") {
                        alert("请填写因子");
                        $("#btn_upload8").attr("disabled", "disabled")
                    } else {
                        $("#btn_upload8").removeAttr("disabled")
                        }              
                });