I have a modal pop up inside a page. It has three dropdowns inside it. Two of them will be filled based on the selected value of the previuos drop down. The problem is popup closes on postbacks. 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">×</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">×</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">×</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>