Bootstrap Modal Popup not opening on LinkButton Click from code behind in ASP.Net

Last Reply 6 months ago By dharmendr

Posted 6 months ago

Hello Everyone,                  

I have an asp.net webform on which I have used bootstrap panel with link button controls under panel header. On clicking link button, modal popup is not showing up. My modal consist of iframe whose src is programatically defined on the onClick event of link button.

I have searched a lot but was unable to get the solution. Kindly help me getting out of this any suggestions will be appreciated. Below is my code

<script type="text/javascript">
    function openModal() {
        $('#myModal').modal('show');
    }
</script>
<div>
    <div id="myModal" 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">
                        Modal Header</h4>
                </div>
                <div class="modal-body">
                    <iframe id="Iframe1" runat="server"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <b>ADM Details</b> <span style="float: right" data-toggle="collapse" data-target="#admDetails"
                class="glyphicon glyphicon-minus"></span>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="lbADM_Click">Edit</asp:LinkButton>
            <asp:LinkButton ID="LinkButton2" runat="server" data-toggle="modal" data-target="#myModal"
                OnClick="lbTechnical_Click">EditTech</asp:LinkButton>
        </div>
        <div class="panel-body collapse in" id="admDetails">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <asp:Label ID="lbAdmAppDate" runat="server" Text="ADM Approval" CssClass="lbl1"></asp:Label>
                    <asp:Label ID="lblAdmApprovalDate" runat="server" Text="-" CssClass="lbl2"></asp:Label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <asp:Label ID="lbAdmAmt" runat="server" Text="ADM Amount" CssClass="lbl1"></asp:Label>
                    <asp:Label ID="lblAdmAmount" runat="server" Text="-" CssClass="lbl2"></asp:Label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <br style="line-height: 50px" />
                    <asp:HyperLink runat="server" ID="hplAdmDetails" Text="Edit" CssClass="hpl" Visible="false"></asp:HyperLink>
                    <asp:LinkButton ID="lbADM" runat="server" Text="Edit" CssClass="hpl" OnClick="lbADM_Click">Edit</asp:LinkButton>
                </div>
            </div>
        </div>
    </div>
</div>

 

protected void lbADM_Click(object sender, EventArgs e)
{
    Iframe1.Attributes.Add("src", "AdmDetails.aspx");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

 

Posted 6 months ago Modified on 6 months ago

Hi AbdulHaque,

I have checked. Your code is working.

Check with below sample code.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    function openModal() {
        $('[id*=myModal]').modal('show');
    }
</script>
<div>
    <div id="myModal" 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">
                        Modal Header</h4>
                </div>
                <div class="modal-body">
                    <iframe id="Iframe1" runat="server"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <b>ADM Details</b> <span style="float: right" data-toggle="collapse" data-target="#admDetails"
                class="glyphicon glyphicon-minus"></span>
            <asp:LinkButton ID="LinkButton1" runat="server" OnClick="lbADM_Click">Edit</asp:LinkButton>
            <asp:LinkButton ID="LinkButton2" runat="server" data-toggle="modal" data-target="#myModal"
                OnClick="lbTechnical_Click">EditTech</asp:LinkButton>
        </div>
        <div class="panel-body collapse in" id="admDetails">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <asp:Label ID="lbAdmAppDate" runat="server" Text="ADM Approval" CssClass="lbl1"></asp:Label>
                    <asp:Label ID="lblAdmApprovalDate" runat="server" Text="-" CssClass="lbl2"></asp:Label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <asp:Label ID="lbAdmAmt" runat="server" Text="ADM Amount" CssClass="lbl1"></asp:Label>
                    <asp:Label ID="lblAdmAmount" runat="server" Text="-" CssClass="lbl2"></asp:Label>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <br style="line-height: 50px" />
                    <asp:HyperLink runat="server" ID="hplAdmDetails" Text="Edit" CssClass="hpl" Visible="false"></asp:HyperLink>
                    <asp:LinkButton ID="lbADM" runat="server" Text="Edit" CssClass="hpl" OnClick="lbADM_Click">Edit</asp:LinkButton>
                </div>
            </div>
        </div>
    </div>
</div>

C#

protected void lbADM_Click(object sender, EventArgs e)
{
    Iframe1.Attributes.Add("src", "AdmDetails.aspx");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

protected void lbTechnical_Click(object sender, EventArgs e)
{
    Iframe1.Attributes.Add("src", "AdmDetails.aspx");
    ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}

VB.Net

Protected Sub lbADM_Click(ByVal sender As Object, ByVal e As EventArgs)
    Iframe1.Attributes.Add("src", "AdmDetails.aspx")
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Pop", "openModal();", True)
End Sub

Protected Sub lbTechnical_Click(ByVal sender As Object, ByVal e As EventArgs)
    Iframe1.Attributes.Add("src", "AdmDetails.aspx")
    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Pop", "openModal();", True)
End Sub

Screenshot