ajax/jquery - 打开简单弹出窗口的脚本答案

【问题标题】：ajax/jquery - Script that open simple popup windowajax/jquery - 打开简单弹出窗口的脚本
【发布时间】：2013-01-19 12:54:29
【问题描述】：

我需要打开一个弹出窗口的脚本，比如灯箱。但不是图片

它必须从 html 文件加载视频播放器代码，并将视频文件 ID 发送到此代码

html中的播放器代码：

<iframe src="http://site.com/embed/video file ID" style="width: 800px; height: 450px; border: none; background-color: #000;" frameborder="0"></iframe>

所以我需要用上面的代码打开弹出窗口的脚本。

谢谢！

【问题讨论】：

您需要脚本还是需要帮助编写脚本？

标签： javascript jquery ajax popup window

【解决方案1】：

Fancybox 做得很好。第一版可免费使用。

HTML：

<a class="forpopup" href="http://www.example?iframe">This goes to iframe</a>

JS：

$('a.forpopup').fancybox();

【讨论】：

【解决方案2】：

在jQuery ColorBox 中查看，在Demos Page 中找到其他内容类型部分，通过 AJAX、Flash 和视频示例获取外部 HTML 内容。

一个简单的用法示例：

// Format:
$(selector).colorbox({key:value, key:value, key:value});

// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});

// Ajax
$('a#login').colorbox();

// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});

// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});

// ColorBox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
    var url = $(this).attr('href');
    return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

【讨论】：