I am using Colorbox to load some content from an external (but local) file.
The content appears in everything except Google Chrome.
The linke with the event handler attached:
<div id="content">
<p><a id="modal" href="popup.html" target="_blank">link to popup</a></p>
</div>
This is the jQuery:
$(document).ready(function(){
$("#modal").colorbox({
innerHeight:200,
innerWidth:530,
title:false,
transition:"none",
onComplete:function(){
$("#cboxLoadedContent div:first").attr("id", "pop");
}
});
});
And the page i am trying to inject:
<!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>
Chrome does not by default allow access to local files by AJAX under its security settings. You have to explicitly enable it with the
--allow-file-access-from-fileslaunch parameter.