Avoid modal popup closing on postback

Question

I have a bootstrap modal pop up inside a page. It has three drop downs inside it. Two of them will be filled based on the selected value of the previous drop down. The problem is popup closes on post backs. Is there a way to prevent this popup closing?

This is the design of the modal.

<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

Reopen the modal pop-up again at the end of Postback. I estimate you are using asp.net C# backend.

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

Answer 2

You can call show() method during postback to prevent the modal popup window from closing

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