我有一个竞赛入口网站,需要将文件上传到外部服务。现在,我们只有一个指向该外部服务的链接,但我们发现即使我们在单独的选项卡/窗口中打开链接,用户有时也会忘记返回并完成其余的应用程序。 (此外部服务没有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 “Featured Exhibitor Program” as the subject.</p>
</body>
</html>
答案 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是在模式框中打开网址的另一个很好的解决方案。