模态 Bootstrap 可重用

Question

我有一个输入有效授权码的简单表格。 一旦用户输入提交，我检查提供的授权号码是否有效。 如果无效，将为用户显示“无效授权号”模态。 如果用户没有输入授权号或输入空格，它将点击“请输入授权号”模态。

<!--- Invalid Authorization Number Modal --->
    <div class="modal fade" id="invalidModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="background-color:#428bca !important">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel" style="text-align:center; color:white !important">INVALID AUTH</h4>
          </div>
          <div class="modal-body" style="text-align:center;">
            You have entered an invalid Authorization Number.<br /><br />Please try again.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
<!------------> 

<!--- Please enter an Authorization Number--->  
    <div class="modal fade" id="enterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="background-color:#428bca !important">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body" style="text-align:center;">
            Please enter an Authorization Number.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
<!------------> 

我的问题是有没有一种方法可以只使用一个模式，但根据它满足的条件替换内容、标题等？

目前，这里是确定使用哪种模式的代码：

function myFunction() {
<!---Currently not working with white spaces, currently commented out--->
    if (document.getElementById("auth").value==""){ <!--- || (!document.getElementById("auth").match(/^\s*$/))) {--->
        $("#enterModal").modal();
        document.getElementById("AuthStatus").focus();
        return false
    }
    else{
        if (document.getElementById("auth").value!="") {
            $("#invalidModal").modal();
            document.getElementById("AuthStatus").focus();
            return false
        }
    }
}

这是表格：

<form class="form-style-7" id="AuthStatus">
    <ul>
        <li><label for="name" name="auth">Auth Status</label> <input id="auth" maxlength="100" name="name" placeholder="Authorization Number" type="text" /> <span>Please enter a valid Authorization Number</span></li>
        <li style="display:table; margin:0 auto;">
            <div style="float:left; margin-top:-22px"><input id="cmd" onclick="myFunction()" type="submit" value="Submit" /></div>

            <div style="margin-left:15px; float:left; margin-top:-22px"><input id="clear" onclick="ClearForm()" type="button" value="Clear" /></div>
        </li>
    </ul>
</form>

更新我试过使用 BootstrapDialog.show。 但是，它没有显示任何结果。 我缺少文件吗？ 它不是 Bootstrap 框架的一部分吗？ 任何援助将不胜感激。

这是我所做的：

function myFunction() {
    var auth_value = document.getElementById("auth").value;
    var type = [BootstrapDialog.TYPE_WARNING]; 

    if (document.getElementById("auth").value==""){ <!--- || (!auth_value.match(/^\s*$/))) {--->
        /*$("#enterModal").modal();
        document.getElementById("AuthStatus").focus();
        return false*/
        BootstrapDialog.show({
            type: type,
            title: type + ': Please enter an Authorization Number',
            message: 'Please enter an Authorization Number.',
            buttons: [{
                label: 'Close.'
            }]
        }); 
    }
    else{
        if (document.getElementById("auth").value!="") {
            /*$("#invalidModal").modal();
            document.getElementById("AuthStatus").focus();
            return false*/
            BootstrapDialog.show({
            type: type,
            title: type + ': Invalid Authorization Number',
            message: 'You have entered in invalid authorization number. Re-enter the authorization number.',
            buttons: [{
                label: 'Close.'
            }]
        }); 
        }
    }
}

Answer 1

这是替换模态中内容的最简单方法：

    if (document.getElementById("auth").value=="") {
        document.getElementById("modal-title").innerHTML = "<h4></h4>";
        document.getElementById("modal-body").innerHTML = "<p>You have left the input box empty." + "<br /><br />" + "Enter a Authorization Number.</p>";
        $("#invalidModal").modal();
        document.getElementById("AuthStatus").focus();
        return false
    }