在 Colorbox 中加载 HTML 标记 div

Question

我想在colorbox中显示模板'.ajax'。如果我在 html 页面中定义模板并在颜色框中调用它的工作。当我尝试在 jquery 中创建模板并在颜色框中调用它不起作用时。 在小提琴中工作 不工作 fiddle2(想作为 JavaScript 中调用的模板工作(

.html

<div class="ajax"><img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<p>Hello, world!</p>

jquery

$(document).ready(function(){
$.colorbox({inline:true, href:".ajax", onClosed: function() {
$('.ajax').hide()
}});
});

Answer 1

把你的html模板放在一个单独的文件中...或者你可以直接调用它

// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});
// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});

所以对你来说会是这样的

$(document).ready(function(){
$.colorbox({inline:true, href:"template.html", onClosed: function() {
$('.ajax').hide()
}});
});

根据Colorbox的官方文档。