JQuery Modal Popup

jquery asp.net jquery-ui modal-dialog

19,435

Solution 1

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.

Solution 2

In Asp.Net, If you drag a script manager onto the page, and put the button within a update panel - Content Template tag, then also this works properly. Because the Ajax update panel prevents the postback by default under the covers in asp.net, the button's OnClientClick works properly to show the jquery popup. But this is useful mainly in cases where the button is part of a control set providing a rich client side experience, rather than posting back all the time (e.g. In a usercontrol that provides an interactive client side control panel).

19,435

Author by

Sc0rpio

Updated on June 04, 2022

Comments

Sc0rpio almost 2 years

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!

joncodo almost 12 years

What is your problem? What is your question
MrOBrian almost 12 years

Where are you setting your variable $dialog?

Sc0rpio almost 12 years

I guess I don't need that function, as I can use an onclick event. Good ideas though.
Sc0rpio almost 12 years

Tried your suggestion, just reset original page position. No popup.
Sc0rpio almost 12 years

Do I have to put the button in an UpdatePanel?
Scott Selby almost 12 years

no, the button will work anywhere , you may have to look up "stop asp:Button from postback" though - it may be better to use <input type=button > that one will work for sure , I am not sure if you were planning on handeling the click event in the code behind though after the modal dialog - so I don't know whats best for you
PCasagrande almost 12 years

Is there a reason you are using the asp:button? Ie is there some server side logic that is being done as well?
Sc0rpio almost 12 years

Alright, it works now. Someone please vote Goran up (as I don't have enough reputation to). Thanks!
Klaus Gütter over 5 years

Please also provide an explanation how this solves the problem