我可以在jqueryui对话框中打开一个URL吗?

时间:2011-04-04 15:03:49

标签: modal-dialog jquery-ui-dialog

我有一个竞赛入口网站,需要将文件上传到外部服务。现在,我们只有一个指向该外部服务的链接,但我们发现即使我们在单独的选项卡/窗口中打开链接,用户有时也会忘记返回并完成其余的应用程序。 (此外部服务没有API允许我们从我们的网站无缝上传。)

我的问题:是否可以使用jquery的模态对话框打开外部URL?我不打算以任何方式控制该URL;我只想让用户留在我们的主页上,同时阻止他们与我们网站的其他部分进行互动,直到他们完成上传。

CODE

这是我到目前为止所得到的;它当前正在返回“无法加载请求的内容。请稍后再试。”无论链接是包含我的网址还是仅包含普通的谷歌。此外,即使我将showCloseButton设置为true并设置了height和width属性,它也会忽略这些参数。

<!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>

3 个答案:

答案 0 :(得分:2)

我们使用FancyBox将URL打开到模态中,它似乎工作得很好。

答案 1 :(得分:2)

您可以使用FancyBox any other lightbox plugin 。其中大多数允许您显示不同网站的模态对话框。

编辑:

尝试:

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

答案 2 :(得分:0)

Colorbox是在模式框中打开网址的另一个很好的解决方案。