Bootstrap Modal Overlay Another Modal -
after searching web hours, found solutions regarding on how can open new modal inside modal. requirement kinda different. want use "universal" modal form serve message box in page (not whole application, current page only). message box overlay once being called/shown.
for example, open modal form data entry, if want prompt message user, pop modal form on data entry form.
i new web programming don't know code went wrong or missing something.
here's code designer:
<div class="modal fade" id="modaddbulletin" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" style="top: 15%;" data-keyboard="false" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="h2"><asp:label id="label3" runat="server" text="add bulletin"></asp:label></h3> </div> <div class="modal-body" style="padding-bottom:0px"> <div="container"> <div> <fieldset class="form-group"> <label for="txttitle">title</label> <input id="txttitle" runat="server" type="text" class="form-control" /> </fieldset> <fieldset class="form-group"> <label for="txtdescription">description</label> <textarea class="form-control" runat="server" id="txtdescription" rows="6" style="min-width:568px; min-height:151px; max-width: 568px;"></textarea> </fieldset> <fieldset class="form-group"> <asp:fileupload id="fleupload" runat="server" data-filename-placement="inside" /> </fieldset> </div> </div> <div class="modal-footer"> <asp:linkbutton id="btnupload" runat="server" cssclass="btn btn-success" width="200px"> <span class="glyphicon glyphicon-cloud-upload"></span> upload</asp:linkbutton> <asp:linkbutton id="btncloseupload" runat="server" cssclass="btn btn-default" width="100px"> <span class="glyphicon glyphicon-share-alt" ></span> back</asp:linkbutton> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <%--// popup message --%> <div class="modal fade" id="modalmsg" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" style="top: 30%;" data-keyboard="false" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header" style="background:#4682b4; color:white;"> <h4 class="modal-title">message</h4> </div> <div class="modal-body"> <asp:label id="lblerrormsg" runat="server" font-names="calibri" font-size="11pt"></asp:label> </div> <div class="modal-footer"> <asp:linkbutton id="btnerrmsgclose" runat="server" cssclass="btn btn-primary" width="100px" data-dismiss="modal">close</asp:linkbutton> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> here's how call them code-behind:
clientscript.registerstartupscript(me.gettype(), "show1", "<script> $('#modalmsg').modal('show');</script>") clientscript.registerstartupscript(me.gettype(), "show", "<script> $('#modaddbulletin').modal('show');</script>") here's result:
thank in advance.
you can use z-index solve problem.
var zindex = 1040 + (10 * $('.modal:visible').length); $(this).css('z-index', zindex); settimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zindex - 1).addclass('modal-stack'); }, 0);
Comments
Post a Comment