Click here to Skip to main content
16,023,339 members
Search within:


Show a DIV modal pop up in hyperlink click event.
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
C#5.0
Dear sir ,

Here are my aspx page Design and javascript for display the Modal popup, but its not working.So kindly help me for that problem...

Javascript Code...
<script type="text/javascript">

$("#btnVAaided").click(function Display() {
$("#MdPinhole").modal('show');
});

</script>


Hyperlink .....
HTML
<a href="#"  class="pull-right" id="btnVAaided" OnClientClick="Display();"><span class="glyphicon glyphicon-new-window"></span></a>



Div Modal Design...

ASP.NET
<div class="modal fade" id="MdPinhole" role="dialog">
               <div class="modal-dialog modal-megamenunew">
                   <!-- Modal content-->
                   <div class="modal-content Common_content">
                       <div class="modal-header headerRetiniscopy">
                           <button type="button" class="close btn_close" data-dismiss="modal">&times;</button>


                           <h4>Last 6 visit Log for Pinhole</h4>
                       </div>
                       <div class="container-fluid">
                           <div style="height:20px"></div>
                           <table border="0" class="table table-bordered" cellspacing="0" cellpadding="0" width="481">
                               <thead>
                               <tr>
                                   <td nowrap="nowrap" rowspan="2">#</td>
                                   <td nowrap="nowrap" rowspan="2">Date</td>
                                   <td nowrap="nowrap" rowspan="2">VisitId</td>
                                   <td nowrap="nowrap" rowspan="2">Doctor/Screener</td>
                                   <td nowrap="nowrap" colspan="2">Values</td>
                               </tr>


                               <tr>
                                   <td nowrap="nowrap">Right Eye</td>
                                   <td nowrap="nowrap">Left Eye</td>
                               </tr>
                                    </thead>
                               <tbody>
                               <tr>
                                   <td nowrap="nowrap">1</td>
                                   <td nowrap="nowrap"> <asp:TextBox ID="TextBox1" class="form-control input-sm" runat="server" disabled="disabled"></asp:TextBox></td>
                                   <td nowrap="nowrap"> sas</td>
                                   <td nowrap="nowrap"> sqsq</td>
                                   <td nowrap="nowrap"> <asp:TextBox ID="txtPinholeL1" class="form-control input-sm" runat="server" disabled="disabled"></asp:TextBox></td>
                                   <td nowrap="nowrap"> <asp:TextBox ID="txtPinholeR1" class="form-control input-sm" runat="server" disabled="disabled"></asp:TextBox></td>
                               </tr>




HTML
</tbody>
                           </table>
                       </div>

                   </div>
               </div>
           </div>



Thanks & Regards
Bigyan Sahoo

What I have tried:

I can do the same by using an js file but here I want to display the Pop up using javascript in same page..
Posted
Updated 21-Mar-16 20:28pm
v2
Add a Solution
Comments
Sinisa Hajnal 21-Mar-16 3:25am    
Return false from the function Display so that default behavior (going to server does not trigger)
Sinisa Hajnal 21-Mar-16 3:27am    
Correction (I just read it a bit more carefully) - you're using anchor tag that DOES NOT run at server. Therefore, you should use onclick attribute, not OnClientClick. OnClientClick is for server side controls such as asp:Hyperlink, not for plain HTML control. You still should return false from your Display method.
ZurdoDev 21-Mar-16 8:08am    
Please post as solution.

1 solution

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopup.aspx.cs" Inherits="PayPalApi.ModalPopup" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../../../../Content/js/jquery-1.9.1.min.js"></script>
    <script src="../../../../Content/js/bootstrap.min.js"></script>
    <link href="../../../../../Content/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnVAaided").on("click", function () {
                $("#MdPinhole").modal('show');
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="modal fade" id="MdPinhole" role="dialog">
                <div class="modal-dialog modal-megamenunew">
                    <!-- Modal content-->
                    <div class="modal-content Common_content">
                        <div class="modal-header headerRetiniscopy">
                            <button type="button" class="close btn_close" data-dismiss="modal">&times;</button>


                            <h4>Last 6 visit Log for Pinhole</h4>
                        </div>
                        <div class="container-fluid">
                            <div style="height: 20px"></div>
                            <table border="0" class="table table-bordered" cellspacing="0" cellpadding="0" width="481">
                                <thead>
                                    <tr>
                                        <td nowrap="nowrap" rowspan="2">#</td>
                                        <td nowrap="nowrap" rowspan="2">Date</td>
                                        <td nowrap="nowrap" rowspan="2">VisitId</td>
                                        <td nowrap="nowrap" rowspan="2">Doctor/Screener</td>
                                        <td nowrap="nowrap" colspan="2">Values</td>
                                    </tr>


                                    <tr>
                                        <td nowrap="nowrap">Right Eye</td>
                                        <td nowrap="nowrap">Left Eye</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td nowrap="nowrap">1</td>
                                        <td nowrap="nowrap">
                                            <asp:TextBox ID="TextBox1" class="form-control input-sm" runat="server" disabled="disabled"></asp:TextBox></td>
                                        <td nowrap="nowrap">sas</td>
                                        <td nowrap="nowrap">sqsq</td>
                                        <td nowrap="nowrap">
                                            <asp:TextBox ID="txtPinholeL1" class="form-control input-sm" runat="server" disabled="disabled"></asp:TextBox></td>
                                        <td nowrap="nowrap">
                                            <asp:TextBox ID="txtPinholeR1" class="form-control input-sm" runat="server" disabled="disabled"></asp:TextBox></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>

        </div>

        <a href="#" class="pull-right" id="btnVAaided" style="background: #337ab7; color: white; padding: 6px; position: absolute; right: 50%; top: 5%; border-radius: 5px;">Popup</a>
    </form>
</body>
</html>
 
Share this answer
 
Posted
Updated 21-Mar-16 20:53pm
v4
Add a Solution

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

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
modal pop is not showing in aspx
No modal form is showing and no errors
How to display user details using popover bootstrap without using click event bootstrap modal?
Modal Pop Up is not working
Modal pop up not waiting until any button is clicked
Modal not pop up bootstrap5
Link Button Click Event not fired when using Modal Pop up Extender..
Problem with Ajax Modal Pop Up Control in C#.net
Div popup will come when button click
how to execute server side click event after jquery pop up messgae


Privacy
Cookies
Terms of Use
Last Updated 22 Mar 2016
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web04 2.8:2024-10-17:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900