• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 975
  • Last Modified:

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.
0
aatjan
Asked:
aatjan
  • 4
  • 3
  • 2
  • +2
2 Solutions
 
Julian HansenCommented:
Did you look at fancybox.net?
0
 
Rajar AhmedConsultantCommented:
hi,

Ajax Modal popup dialog  are easy to implement and maintain which has  good flexiblity in  server side coding also . If in case you found any issue there will be a related solution on google/here so you dont have to worry much as this control is being there for many a years .

Use Ajax modal popup when it has more functionality:
     1.Forms submission like wizards which has multiple steps .
     2.Gridview paging/Sorting
     3.If you want to persists on multiple postback
     4.Display results of updatepanel.

Jquery Modal dialog also a good approach when you are displaying things are much simpler Like a popup message,some information about the status , just a single step and if there wont be any sort of postback . Not to forget jquery is not a alien to postback and other thing i said for ajax modal popup you will find it lil complicated when toggling arises especially during postback .

Hope this helps you.
Meeran03
0
 
aatjanAuthor Commented:
Hi,

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

regards.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

thanks.
0
 
RoonaanCommented:
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-
0
 
Rajar AhmedConsultantCommented:
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

0
 
aatjanAuthor Commented:
@meeran03:

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

thanks!
0
 
Tom BeckCommented:
Here's one that does not use the AjaxControlToolKit (from a similar question that I answered recently).

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27803994.html 

JQuery makes it so much easier than the tool kit IMHO.
0
 
aatjanAuthor Commented:
Gents,

I asked advice and i got it. Thanks!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now