避免模​​式弹出关闭回发

Question

我在页面中弹出一个bootstrap模式。里面有三个下降。其中两个将根据前一个下拉列表的选定值进行填充。问题是回弹时弹出窗口关闭。有没有办法阻止这个弹出窗口关闭？

这是模态的设计。

<div class="modal fade" id="myModal" role="dialog"  margin-left: "150px;">
    <div class="modal-dialog" style="width:440px">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close"
                    data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">
                    <asp:Label runat="server" CssClass="col-md-2 control-label" ID="Label1" Font-Bold="True" Style="width: 200px" Font-Size="Medium"> Add Drug</asp:Label>
                </h4>
            </div>
            <!-- Modal Body -->
            <div class="modal-body" style="padding-left: 30px">
                <div class="alert alert-danger fade in" role="alert" id="divError" runat="server" visible="false">
                    <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                </div>
                <div class="alert alert-success fade in" role="alert" id="divSuccess" runat="server" visible="false">
                    <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                </div>


                <div class="form-group row" style="height: 40px">
                    <asp:Label runat="server" CssClass="col-md-2 control-label" Font-Bold="True" Width="120px">Drug Class:</asp:Label>
                    <div class="col-md-4">
                        <asp:DropDownList ID="ddlClass" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlClass_SelectedIndexChanged" Width="200px">
                        </asp:DropDownList>
                    </div>

                </div>
                <div class="form-group row" style="height: 40px">
                    <asp:Label runat="server" CssClass="col-md-2 control-label" Font-Bold="True" Width="120px">Drug Name:</asp:Label>
                    <div class="col-md-4">
                        <asp:DropDownList ID="ddlName" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlName_SelectedIndexChanged" Width="200px"></asp:DropDownList>
                    </div>
                </div>

                <div class="form-group row" style="height: 40px">
                    <asp:Label runat="server" CssClass="col-md-2 control-label" Font-Bold="True" Width="120px">Brand Name:</asp:Label>
                    <div class="col-md-4">
                        <asp:DropDownList ID="ddlBrand" runat="server" Width="200px"></asp:DropDownList>

                    </div>
                </div>
                <div class="form-group row " style="height: 40px">
                    <asp:Label runat="server" CssClass="col-md-2 control-label" Font-Bold="True" Width="120px">Dose:</asp:Label>
                    <div class="col-md-2" >
                        <asp:TextBox ID="txtAmount" runat="server" Width="68px" CssClass="form-control" ></asp:TextBox>

                    </div>
                     <div class="col-md-2">
                          <asp:DropDownList ID="ddlDose" runat="server" CssClass="form-control" Width="70px" >
                            <asp:ListItem>mg</asp:ListItem>
                            <asp:ListItem>g</asp:ListItem>
                            <asp:ListItem>ml</asp:ListItem>
                            <asp:ListItem>tsp</asp:ListItem>
                            <asp:ListItem>tab</asp:ListItem>
                        </asp:DropDownList>                        </div>
                </div>
                <div class="form-group row" style="height: 40px">
                    <asp:Label runat="server" CssClass="col-md-2 control-label" Font-Bold="True" Width="120px">Frequency:</asp:Label>
                    <div class="col-md-4">
                        <asp:DropDownList ID="ddlFreaquency" runat="server" CssClass="form-control" >
                            <asp:ListItem>tds</asp:ListItem>
                            <asp:ListItem>bf</asp:ListItem>
                            <asp:ListItem>nocte</asp:ListItem>
                            <asp:ListItem>vesper</asp:ListItem>
                            <asp:ListItem>daily</asp:ListItem>
                            <asp:ListItem>weekly</asp:ListItem>
                        </asp:DropDownList>
                    </div>
                </div>
                <div class="form-group row" style="height: 40px">
                    <asp:Label runat="server" CssClass="col-md-2 control-label" Font-Bold="True" Width="120px">Duration:</asp:Label>
                    <div class="col-md-4">
                        <asp:DropDownList ID="ddlDuration" runat="server" CssClass="form-control" ></asp:DropDownList>
                    </div>
                </div>
                <div class="modal-footer">
                    <asp:Button runat="server" Text="Save" CssClass="btn btn-primary" ID="Button1" OnClick="btnsave_Click" />
                    <button type="button" class="btn btn-default"
                        >
                        Close</button>
                </div>
            </div>
            <div>
            </div>

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

Answer 1

您可以在回发期间调用show（）方法以防止模式弹出窗口关闭

$("#myModal").modal('show');

Answer 2

在Postback结束时再次重新打开模式弹出窗口。我估计你使用的是asp.net C＃后端。

string message = "$('#myModal').modal({ backdrop: 'static', keyboard: false, show: true });";
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", message, true);