Question

我正在使用Colorbox从外部（但本地）文件加载一些内容。

内容会显示在除Google Chrome之外的所有内容中。

附带事件处理程序的linke：

    <div id="content">
        <p><a id="modal" href="popup.html" target="_blank">link to popup</a></p>
    </div>

这是jQuery：

 $(document).ready(function(){
   $("#modal").colorbox({
        innerHeight:200,
        innerWidth:530,
        title:false,
        transition:"none",
        onComplete:function(){
            $("#cboxLoadedContent div:first").attr("id", "pop");
        }
   });
 });

我试图注入的页面：

<!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" dir="ltr">
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Hotels.com</title>
    <meta name="title" content="" />
    <meta name="keywords" content="Hotels, travel" />
    <meta name="author" content="Ryan Pays" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />  
</head>
    <body id="pop">
        <div class="wrap">
            <div class="section">
                <div class="redBar">
                    <p>Lorem ipsum</p>
                </div>
                <form id="frmExp" name="frmExp" method="post" action="#">
                    <fieldset>
                        <legend>A form</legend>
                        <ul>
                            <li>
                                <input type="radio" id="radYes" name="rdAnswer" value="Yes" />
                                <label for="radYes">Yes</label>
                            </li>   
                            <li>    
                                <input type="radio" id="radNo" name="rdAnswer" value="Yes" />
                                <label for="radNo">No</label>
                            </li>
                            <li>
                                <button type="submit">
                                    <span>Button</span>
                                </button>
                            </li>
                            <li>
                                <button type="submit">
                                    <span>Bigger button</span>
                                </button>
                            </li>
                            <li>
                                <button type="submit" class="back">
                                    <span>Back button</span>
                                </button>
                            </li>
                        </ul>
                    </fieldset>
                </form>
            </div>
            <div class="aside">
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam placerat aliquet nibh</li>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam placerat aliquet nibh</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Answer 1

特别是Windows XP SP3上的谷歌浏览器和ColorBox就像这样有一个已知的错误。这已在1.3.9中修复，因此请确保更新插件。

您可以在此处找到来源 http://github.com/jackmoore/colorbox/raw/master/colorbox/jquery.colorbox-min.js

Answer 2

Chrome默认情况下不允许AJAX在其安全设置下访问本地文件。您必须使用--allow-file-access-from-files启动参数明确启用它。

jQuery colorbox加载除Chrome以外的所有内容

2 个答案: