CODEWITHSUNDEEP
modal-dialogjquery-ui-dialog
EmmyS
EmmyS

Reputation: 12138

Can I open a URL in a jqueryui dialog?

I have a contest entry site that requires a file upload to an external service. Right now, we just have a link to that external service, but we've found that even if we open the link in a separate tab/window, users sometimes forget to come back and complete the rest of our application. (This external service has no API for allowing us to do the uploads seamlessly from our site.)

My question: is it possible to use jquery's modal dialog to open an external URL? I'm not looking to control that URL in any way; I just want to keep the users on our main page while at the same time preventing them from being able to interact with the rest of our site until they've completed the upload.

CODE

Here's what I've got so far; it's currently returning "The requested content cannot be loaded. Please try again later." regardless of whether the link contains my URL or just plain google. Also, even though I have showCloseButton set to true and the height and width attributes set, it's ignoring those params.

<!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" xml:lang="en" lang="en"> 
<head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" href="../css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 
<script>
$(function() {
    $("#dropLink").click(function() {
            $.fancybox({
                            'padding'       : 0,
                            'modal'     : true,
                            'autoScale'     : false,
                            'transitionIn'  : 'none',
                            'transitionOut' : 'none',
                            'title'     : 'Upload Video',
                            'width'     : 680,
                            'height'        : 495,
                            'showCloseButton'   : true,
                    });

            return false;
    });
});

</script>
</head>
<body>
    <p>1. Visit <a id="dropLink" href="http://www.google.com">our dropbox</a> and upload your video file. Please enter &ldquo;Featured Exhibitor Program&rdquo; as the subject.</p> 

</body>
</html>

Upvotes: 1

Views: 17064

Answers (3)

shasi kanth
shasi kanth

Reputation: 7094

Colorbox is another great solution for opening urls in modal box.

Upvotes: 0

Damb
Damb

Reputation: 14600

You can use FancyBox or any other lightbox plugin. Most of them allows you to show modal dialog with different website.

Edit:

try:

$("#dropLink").fancybox({
                'width' : '680px',
                'height' : '495px',
                'autoScale' : false,
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'type' : 'iframe'
            });

Upvotes: 2

El Guapo
El Guapo

Reputation: 5781

We use FancyBox to open URLs into modals and it seems to work just fine.

Upvotes: 2

Related Questions