Bootstrap window 在警报语句后关闭

Question

我低于 bootstrap 模态。我在这里只显示 2 个字段。但是我有超过 10 个字段都是强制性的。我正在 javascript 单击 Add_click(); 中的添加按钮进行验证，并提醒用户 All fields are mandatory。单击 Alert 后，Modal window 就会关闭。我需要保留此 window 直到用户提供所有详细信息。

<div id="modalUserAddition" class="modal fade">
            <div class="modal-dialog" style="width: 600px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            &times;<span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title">User Details</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <input type="text" id="txtUserName" class="form-control" runat="server" placeholder="User Name"   />
                        </div>
                        <div class="form-group">
                            <input type="text" id="txtPassword" class="form-control" runat="server" placeholder="Password" />
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="Close" class="btn btn-default" data-dismiss="modal">Close</button>

                        <button type="button" id="Add" onclick="Add_click();" class="btn btn-primary" data-dismiss="modal">Add User</button>

                    </div>

                </div>
            </div>
        </div>

我试过下面的代码，但它对我不起作用。

alert('All fields are mandatory!');
    //$('#modalUserAddition').modal('toggle');
    $('#modalUserAddition').modal({
        show: true
    });

请帮忙！

Answer 1

由于您使用的是 Bootstrap，也许更好的选择是使用它的 native alerts。

它会避免您当前的问题并且更加一致。

Answer 2

从“添加”按钮中删除 data-dismiss="modal" 并关闭 Add_click 中的模式，其中通过添加证明数据有效：

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

Answer 3

我认为当您单击警报时您是在模态之外单击，并且由于其本机行为它正在关闭模态。您可以使用背景选项。通过值 static 传递此选项将防止在模态外部单击后关闭模态。

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static">
    Launch demo modal
 </button>

或者您可以通过 JavaScript

$('#myModal').modal({backdrop: 'static'})

DEMO

Answer 4

我把 data-backdrop="static" 放在按钮中，在返回验证结果时 return false; 。

Bootstrap window 在警报语句后关闭

Bootstrap window closes after alert statement

javascript

jquery

twitter-bootstrap