Bootstrap Nested Modals - The First Disappears When I Call The Second

Question

0.00/5 (No votes)

See more:

Hi,

I need your help... I can make one modal works well, when i try to open a second modal the first dissapears.
I´m using vb because i dont understand javascript.

ASP:

ASP.NET

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="teste.aspx.vb" Inherits="gestcem.teste" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
     
    <asp:UpdatePanel ID="panel_conc" runat="server">
        <ContentTemplate>
                      

            <asp:Button ID="btn_cons_campa" runat="server" Text="Novo" class="btn btn-primary btn-sm" CausesValidation="false" />
           
            <!-- Modals-->
            <div class="modal fade" id="mod" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="mod_title"  runat="server"></h4>
                        </div>
                        <div class="modal-body">
                            <section>
                                <div class="row">
                                    <div class="col-md-6">
                                        <asp:Label ID="lbl_mod_1" runat="server" Text="111"></asp:Label>
                                    </div>
                                    <div class="col-md-6">
                                        <asp:DropDownList ID="drop_mod_1" CssClass="form-control input-sm" runat="server"></asp:DropDownList>
                                    </div>
                                </div>
                            </section>
                            <br />
                            <section>
                                <div class="row">
                                    <div class="col-md-6">
                                        <asp:Label ID="lbl_mod_2" runat="server" Text=""></asp:Label>
                                    </div>
                                    <div class="col-md-6">
                                        <asp:DropDownList ID="drop_mod_2" CssClass="form-control input-sm" runat="server"></asp:DropDownList>
                                    </div>
                                </div>
                            </section>
                            <br />
                            <section>
                                <div class="row">
                                    <div class="col-md-6">
                                        <asp:Label ID="lbl_mod_3" runat="server" Text=""></asp:Label>
                                    </div>
                                    <div class="col-md-6">
                                        <asp:TextBox ID="txt_dt_mod_3" MaxLength="10" runat="server" CssClass="datepicker form-control input-sm" CausesValidation="False" TextMode="Date"></asp:TextBox>
                                    </div>
                                </div>
                            </section>
                            <br />
                            <section>
                                <div class="row">
                                    <div class="col-md-6">
                                        <asp:Label ID="lbl_mod_4" runat="server" Text=""></asp:Label>
                                    </div>
                                    <div class="col-md-6">
                                        <asp:TextBox Visible="false" ID="txt_mod_4" MaxLength="10" runat="server" class="form-control" CausesValidation="False"></asp:TextBox>
                                        <asp:DropDownList Visible="false" ID="drop_mod_4" CssClass="form-control input-sm" runat="server" ></asp:DropDownList>
                                    </div>
                                </div>
                            </section>
                            <br />
                            <section>
                                <div class="row">
                                    <div class="col-md-6">
                                        <asp:Label ID="lbl_mod_5" runat="server" Text=""></asp:Label>
                                        
                                    </div>
                                    <div class="col-md-6">
                                        <asp:TextBox ID="txt_mod_5" runat="server" CssClass="form-control input-sm" MaxLength="200" CausesValidation="False" TextMode="MultiLine" Rows="3"></asp:TextBox>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div class="modal-footer">
                            <asp:Button ID="btn_save_mod" ValidationGroup="mod" Text="Guardar" runat="server" class="btn btn-primary btn-sm" />
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="modal fade" id="mod_mov" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false" data-options="multiple_opened:true;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <h4 class="modal-title" id="H1"  runat="server">Transladadar para...</h4>
                        </div>
                        <div class="modal-body">
                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade in active" id="pane_dados">
                                    <div>
                                        <p></p>
                                        <div class="panel-group" id="accordion">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#local">Local</a>
                                                    </h4>
                                                </div>
                                                <div id="local" class="panel-collapse collapse">
                                                    <div class="panel-body">
                                                        <div class="col-md-12">
                                                            <section>
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <p>Tipo de campa</p>
                                                                    </div>
                                                                    
                                                                </div>
                                                            </section>
                                                            <section>
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <p>N.º Campa</p>
                                                                    </div>
                                                                    
                                                                </div>
                                                            </section>
                                                        </div>
                                                    </div>
                                                </div>
                                                </div>
                                                <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h4 class="panel-title">
                                                        <a data-toggle="collapse" data-parent="#accordion" href="#outro">Outro</a>
                                                    </h4>
                                                </div>
                                                <div id="outro" class="panel-collapse collapse">
                                                    <div class="panel-body">
                                                        <div class="col-md-12">
                                                            <section>
                                                                <div class="row">
                                                                    <div class="col-md-5">
                                                                        <p>Entidade externa</p>
                                                                    </div>
                                                                    <div class="col-md-7">
                                                                        <asp:TextBox ID="txt_mod_obs" runat="server" CssClass="form-control input-sm" MaxLength="200" CausesValidation="False" TextMode="MultiLine" Rows="3"></asp:TextBox>
                                                                    </div>
                                                                </div>
                                                            </section>
                                                        </div>
                                                    </div>
                                                </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <asp:Button ID="btn_save_mod_mov" ValidationGroup="mod" Text="Transladar" runat="server" class="btn btn-primary btn-sm" />
                        </div>  
                    </div>
                </div>
                </div>
            

        </ContentTemplate>
    </asp:UpdatePanel>
 
</asp:Content>

VB code:

VB

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Private Sub hide_modal()
        Dim sb As New System.Text.StringBuilder()
        sb.Append("<script type='text/javascript'>")
        sb.Append("$('#mod').modal('hide');")
        sb.Append("$('body').removeClass('modal-open');")
        sb.Append("$('.modal-backdrop').remove();")
        sb.Append("</script>")
        ScriptManager.RegisterClientScriptBlock(Me, Me.[GetType](), "hide_mod_script", sb.ToString(), False)
    End Sub

    Private Sub hide_modal2()
        Dim sb As New System.Text.StringBuilder()
        sb.Append("<script type='text/javascript'>")
        sb.Append("$('#mod_mov').modal('hide');")
        sb.Append("$('body').removeClass('modal-open');")
        sb.Append("$('.modal-backdrop').remove();")
        sb.Append("</script>")
        ScriptManager.RegisterClientScriptBlock(Me, Me.[GetType](), "hide_mod2_script", sb.ToString(), False)
    End Sub

    Private Sub show_modal()
        Dim sb As New System.Text.StringBuilder()
        sb.Append("<script type='text/javascript'>")
        sb.Append("$('#mod').modal('show');")
        sb.Append("</script>")
        ScriptManager.RegisterClientScriptBlock(Me, Me.[GetType](), "show_mod_script", sb.ToString(), False)
    End Sub

    Private Sub show_modal2()
        Dim sb As New System.Text.StringBuilder()
        sb.Append("<script type='text/javascript'>")
        sb.Append("$('#mod_mov').modal('show');")
        sb.Append("</script>")
        ScriptManager.RegisterClientScriptBlock(Me, Me.[GetType](), "show_mod2_script", sb.ToString(), False)
    End Sub

    Private Sub btn_save_mod_Click(sender As Object, e As EventArgs) Handles btn_save_mod.Click
        show_modal2()
        'hide_modal()
    End Sub

    Protected Sub btn_cons_campa_Click(sender As Object, e As EventArgs) Handles btn_cons_campa.Click
        show_modal()
    End Sub

Thanks

Posted 1-Dec-15 3:55am

Joao A P Carvalho

Updated 1-Dec-15 4:06am

v2

Add a Solution

Comments

phil.o 1-Dec-15 11:35am

This is what a modal box is for: prevent any other window to be activated until modal box is closed. So a requirement to have two modal boxes at the same time cannot be fullfilled, by design. As stated in solution 1, you have to change the way you design your application, because you cannot change the way a modal popup works. Cheers :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Krunal Rohit · Accepted Answer · 2015-12-01T05:18:00

Solution 1

Why shouldn't it ? This is a default behavior of the modal popup.

Modal popup works fine. You need to change the design of your system. Provide a tab-control withing a popup so that you can have both the popup screen in one.

-KR

Posted 1-Dec-15 5:18am

Krunal Rohit

Comments

Joao A P Carvalho 1-Dec-15 11:24am

I need to open the second maintaining the first. Basically i need to control SelectedIndexChanged of one dropdownlist, if its a value that i want it will trigger the second modal for user to select data, and then update to db, after that, i need to to to the first modal.