如何在jQuery UI对话框中显示IFRAME
|
我要升级的Web应用程序使用jQuery和jQuery UI。我已经用jQuery UI对话框替换了
window.open
<a target=_blank>
<a href=\"http://website.com/videos/1.html\" target=\"_blank\"><img src=\"http://website.com/videos/1.png\"></a>
<a href=\"http://website.com/videos/2.html\" target=\"_blank\"><img src=\"http://website.com/videos/2.png\"></a>
target=iframe1
没有找到相关结果
已邀请:
2 个回复
冉案
$(\"#dialog\").append($(\"<iframe />\").attr(\"src\", \"your link\")).dialog({dialogoptions});$(\"#dialog\").load(\"yourajaxhandleraddress.htm\").dialog({dialogoptions});藐刚
创建对话框 在打开对话框之前指定iframe源，宽度和高度 这是代码的大致轮廓： 的HTML<div class=\"thumb\"> <a href=\"http://jsfiddle.net/yBNVr/show/\" data-title=\"Std 4:3 ratio video\" data-width=\"512\" data-height=\"384\"><img src=\"http://dummyimage.com/120x90/000/f00&text=Std+4-3+ratio+video\" /></a></li> <a href=\"http://jsfiddle.net/yBNVr/1/show/\" data-title=\"HD 16:9 ratio video\" data-width=\"512\" data-height=\"288\"><img src=\"http://dummyimage.com/120x90/000/f00&text=HD+16-9+ratio+video\" /></a></li> </div>$(function () { var iframe = $(\'<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen></iframe>\'); var dialog = $(\"<div></div>\").append(iframe).appendTo(\"body\").dialog({ autoOpen: false, modal: true, resizable: false, width: \"auto\", height: \"auto\", close: function () { iframe.attr(\"src\", \"\"); } }); $(\".thumb a\").on(\"click\", function (e) { e.preventDefault(); var src = $(this).attr(\"href\"); var title = $(this).attr(\"data-title\"); var width = $(this).attr(\"data-width\"); var height = $(this).attr(\"data-height\"); iframe.attr({ width: +width, height: +height, src: src }); dialog.dialog(\"option\", \"title\", title).dialog(\"open\"); }); });