Home/ Questions/Q 8315597
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T21:10:04+00:00

I’m attempting to have a modalpopup appear once a button has been clicked on

  • 0

I’m attempting to have a modalpopup appear once a button has been clicked on an asp.net page.

   <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestFile.ascx.cs" Inherits="TestFile" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.IO" %>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript"> 

                function fnmodalpopup() {
        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
});
        </script>
    </head>

    <!--Misc functions for operations -->
    <script runat="server" type="text/javascript">

    </script>

    <div id="dialog-modal" title="Basic modal dialog">
        <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
    </div>

    <asp:Button ID="Button1" runat="server" Text="Button" />

I’m trying to create a dialog box exactly like http://jqueryui.com/demos/dialog/#modal, but triggered in an asp.net form by clicking a button. The page flashes and nothing appears.

Any feedback would be very helpful!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should use OnClientClick event and then prevent the postback with return false like this:

    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return fnmodalpopup()" />

function fnmodalpopup() {   
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
    return false;
});

    Edit:
    I’ve changed OnClientClick=”return fnmodalpopup()”
    Now it works OK (at least when I tested it).

    Just curious, why do you want to use server-side component if you don’t want to create postback? If there is no situation when this button have to do postback, perhaps it would be better to use html button tag (or any other html tag and catch ‘click’ event with jQuery). It doesn’t matter if you use asp.net controls on the rest of the page.

    • 0