如何使网页在颜色框中打开？答案

【问题标题】：How to make a webpage open up in a colorbox?如何使网页在颜色框中打开？
【发布时间】：2019-07-08 23:18:33
【问题描述】：

我试图打开一个不同的网页作为颜色框，但我似乎无法弄清楚。

下面是当有人点击图片时我想要打开的网页。

<div class="album py-5">
  <div class="container">
    <div class="row">
      <div id="projects" class="col-md-8 col-lg-6 shadow-sm">
        <a href="project1.html" id="yourlink"><img class="img-fluid" src="img/mockup.png" alt="iPhone Mockup">
        </a>
      </div>
    </div>
  </div>
</div>

下面是我做的脚本。

<script>
  "use strict";
  $(document).ready(function(){
    $('#yourlink').colorbox();
  });
</script>

这是我第一次尝试使用 colorbox，所以有点困惑，谢谢。

【问题讨论】：

标签： javascript html css colorbox

【解决方案1】：

colorbox 有一个名为“html”的配置属性，您可以在其中提供要显示的 html 代码。例如：

var code = $('div.py-5').html();
$('#yourlink').colorbox({html: code});

如果您可以修改要显示的 html，您还可以检查颜色框示例，因为它们包含内联 HTML 示例。

编辑：这是一个工作示例：

var button = $("#clickme");

$(document).ready(function() {
	var code = $("#myContent").html();
	$("#clickme").colorbox({ "html": code })
});

#myContent {
  display: none;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>Colorbox Examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <style rel="https://www.jacklmoore.com/colorbox/example1/colorbox.css"></style>
  </head>
  <body>
    <div id="myContent">
      <p>Hello World from the content.</p>
    </div>
    
    <a href="#none" id="clickme">Click me</a>
 </body>
</html>

【讨论】：

$(document).ready(function(event){ event.preventDefault(); var code = $('div.py-5').html(); $.colorbox({ href : 代码, iframe: true, innerWidth: 645, innerHeight: 509}); });
我厌倦了上面的代码，但是当我尝试它时没有任何反应。我不知道出了什么问题。