Open (Show) Bootstrap Modal Popup inside another on Button Click in ASP.Net

Last Reply 4 days ago By pandeyism

Posted 4 days ago

hey,

i am using bootstrap modal popup box having a boutton which should open another popup box by pressing on it within the parent popup box.

Posted 4 days ago

Hi nid@patel,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript">
        $(function () {
            $("[id*=btnVerify]").click(function () {
                $("[id*=MyPopup]").modal("show");
                $("[id*=myModal1]").modal("show");
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="lbl_session" runat="server" Text="Label" Visible="false"></asp:Label>
    <div class="container">
        <div>
            <h1 class="text-center">
                Your Profile</h1>
            <hr />
        </div>
        <div>
            <asp:GridView ID="GridView1" CssClass="table table-bordered table-striped table-hover"
                runat="server" AutoGenerateColumns="False" DataKeyNames="Id">
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" InsertVisible="False"
                        SortExpression="Id"></asp:BoundField>
                    <asp:BoundField DataField="name" HeaderText="Name" SortExpression="name"></asp:BoundField>
                    <asp:BoundField DataField="state" HeaderText="State" SortExpression="state"></asp:BoundField>
                    <asp:BoundField DataField="district" HeaderText="District" SortExpression="district">
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="Approve">
                        <HeaderTemplate>
                            <div class="text-center">
                            </div>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyPopup">
                                Edit
                            </button>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </div>
    <%--    update profile--%>
    <div id="MyPopup" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;</button>
                    <h4 class="modal-title">
                        Select Fruit
                    </h4>
                </div>
                <div class="modal-body" style="height: 500px">
                    <div class="signup-form">
                        <%-- cname--%>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class=""></i></span>
                                <asp:TextBox ID="txt_cname" CssClass="form-control" runat="server" placeholder="Company Name"
                                    required="required"></asp:TextBox>
                            </div>
                        </div>
                        <%--state--%>
                        <div class="form-group">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class=""></i></span>
                                    <asp:TextBox ID="txt_state" CssClass="form-control" runat="server" placeholder="State"
                                        required="required"></asp:TextBox>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon"></span>
                                    <asp:DropDownList ID="ddl_state" CssClass="form-control" AutoPostBack="true" placeholder="Select State"
                                        runat="server" required="required" OnSelectedIndexChanged="ddl_state_SelectedIndexChanged">
                                    </asp:DropDownList>
                                </div>
                            </div>
                        </div>
                        <%-- district--%>
                        <div class="form-group">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class=""></i></span>
                                    <asp:TextBox ID="txt_dist" CssClass="form-control" runat="server" placeholder="District"
                                        required="required"></asp:TextBox>
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon"></span>
                                    <asp:DropDownList ID="ddl_dist" CssClass="form-control" AutoPostBack="true" placeholder="Select State"
                                        runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                                    </asp:DropDownList>
                                </div>
                            </div>
                        </div>
                        <%--address--%>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class=""></i></span>
                                <asp:TextBox ID="txt_address" CssClass="form-control" runat="server" placeholder="Address"
                                    required="required" TextMode="MultiLine"></asp:TextBox>
                            </div>
                        </div>
                        <%--email--%>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class=""></i></span>
                                <asp:TextBox ID="txt_mail" CssClass="form-control" runat="server" placeholder="E-mail"
                                    required="required"></asp:TextBox>
                            </div>
                            <div>
                                <button type="button" id="btnVerify" class="btn btn-default" data-dismiss="modal"
                                    data-target="#myModal1">
                                    Verify</button>
                            </div>
                            <div id="EmailVerifyPopup" class="modal fade" role="dialog">
                                <div class="modal-dialog">
                                    <!-- Modal content-->
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">
                                                &times;</button>
                                            <h4 class="modal-title">
                                                Select Fruit
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-danger" data-dismiss="modal">
                                                Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%--number--%>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class=""></i></span>
                                <asp:TextBox ID="txt_num" CssClass="form-control" runat="server" placeholder="Contact Number"
                                    required="required"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <%--popupEmail--%>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        Close</button>
                    <asp:Button ID="Button1" class="btn btn-danger" runat="server" Text="Update" OnClick="Button1_Click" />
                </div>
            </div>
        </div>
    </div>
    <%--    change pwd--%>
    <div class="container">
        <!-- Button to Open the Modal -->
        <button style="float: right" type="button" class="btn btn-primary" data-toggle="modal"
            data-target="#myModal1">
            Change Password
        </button>
        <!-- The Modal -->
        <div class="modal fade" id="myModal1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Change Password</h4>
                        <button type="button" class="close" data-dismiss="modal">
                            &times;</button>
                    </div>
                    <!-- Modal body -->
                    <div class="modal-body">
                        <div class="signup-form">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"></span>
                                    <asp:TextBox ID="txt_email" ReadOnly="true" CssClass="form-control" runat="server"
                                        placeholder="Email" required="required"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <asp:Button ID="Button2" class="btn btn-danger" runat="server" Text="Next" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id", typeof(int)), new DataColumn("name", typeof(string)), new DataColumn("state", typeof(string)), new DataColumn("district", typeof(string)) });
        dt.Rows.Add(1, "Mudassar Khan", "Maharashtra", "Mumbai");
        dt.Rows.Add(2, "John Hammod", "Westchester", "New Rochelle");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{

}
protected void ddl_state_SelectedIndexChanged(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{

}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("Id", GetType(Integer)), New DataColumn("name", GetType(String)), New DataColumn("state", GetType(String)), New DataColumn("district", GetType(String))})
        dt.Rows.Add(1, "Mudassar Khan", "Maharashtra", "Mumbai")
        dt.Rows.Add(2, "John Hammod", "Westchester", "New Rochelle")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub

Protected Sub ddl_state_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub

Screenshot