Can I open a URL in a jqueryui dialog?_问答_开发者

开发者 https://www.devze.com 2023-02-22 12:30 出处：网络

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 ta

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"></scrip开发者_JS百科t> 
<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>

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'
            });

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

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