asked on

advice wrt JQUERY/AJAX modal popup window with aspx content

hi,

i trying to find out what type of technology i must use for popping up an aspx page (modal) after having clicked an image button.

i tried earlier Radwindow. I was not impressed by the speed. Now jquery is available, AJAX modal popup windows too.

My question: i must show an aspx page in a popup window, not just a simple alert (which is done by a lot of examples). Which tool (not to complicated) to use including an example, tuned on my situation (asp.net, vb.net, vs2005/2008 development) which helps me to implement your advice.

thanks.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Rajar Ahmed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

aatjan

ASKER

Hi,

thanks. Where can i find a detailed example to get an aspx displayed in a Ajax Modal Popup/

regards.

aatjan

ASKER

@julianh
I looked at it. Really fancy. However, i'm not that familiar with jscript that i understand the integration with asp.net ...

thanks.

Julian Hansen

Here are some posts that might help

http://stackoverflow.com/questions/3220238/triggering-fancybox-from-asp-net-codebehind

http://codingboynamedtracy.com/blog/fancybox-asp-net-web-forms/

Roonaan

A really basic example of jQuery UI's dialog with AJAX logic is to use the following snippet:

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
		<script type="text/javascript">
		function openDialog(url) {
			var $dialog = $('#dialog').dialog().load(url);
		}
		</script>
	</head>
	<body>
		<input type="button" onclick="openDialog('test.html');" value="Show dialog" />


		<div id="dialog"></div>
	</body>
</html>

Open in new window

The relevant function is in the '<script>' tag. Copy and paste it to your javascript library file if you have any, or to the head of your template for testing purposes if you don't.

You need to copy the empty '<div id="dialog"></div>' to your template, as well as make sure that jQuery and jQuery UI's script tags are in there.

Then create a button in ASP that calls the openDialog function with the right URL of your ASPX page.

Regards,

-r-

Rajar Ahmed

try these ,
http://www.codeproject.com/Articles/34996/ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co
http://www.aspsnippets.com/Articles/Building-Modal-Popup-using-ASPNet-AJAX-ModalPopupExtender-Control.aspx

Rajar Ahmed

try this ,
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="modalIframe.aspx.vb" Inherits="JsJquery_modalIframe" %>

<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
    .modalBackground
    {
        background-color: Black;
        filter: alpha(opacity=90);
        opacity: 0.8;
    }
    .modalPopup
    {
        background-color: #FFFFFF;
        border-width: 3px;
        border-style: solid;
        border-color: black;
        padding-top: 10px;
        padding-left: 10px;
        width: 300px;
        height: 140px;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
        <div>
            <asp:Button ID="Button1" runat="server" Text="Open Aspx Page" /><br />
            <asp:HiddenField ID="dum" runat="server" />

            <cc1:ModalPopupExtender ID="loadAspxPage" runat="server" PopupControlID="Panel1" TargetControlID="Button1"
                BackgroundCssClass="modalBackground" CancelControlID="closebutton">
            </cc1:ModalPopupExtender>
            <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
                <iframe id="frmSource" src="AssignYourAspxUrl.aspx"></iframe>
                <asp:Button Text="close" ID="closebutton" runat="server" />
            </asp:Panel>

        </div>
    </form>
</body>
</html>

Open in new window

aatjan

ASKER

@meeran03:

This is the type of answer i'm looking for! Shall try it tomorrow ....

thanks!

Tom Beck

Here's one that does not use the AjaxControlToolKit (from a similar question that I answered recently).

https://www.experts-exchange.com/questions/27803994/asp-net-jquery-gray-out.html

JQuery makes it so much easier than the tool kit IMHO.

aatjan

ASKER

Gents,

I asked advice and i got it. Thanks!