Question

您好我在模态代码中添加了一些文本img和链接。

标题标记<h1 </h1>工作正常，但是当我尝试使用<a> </a>标记添加链接时，它无效<img> </img>标记也无效，下面是我的代码

<html>
<head>
<meta charset=utf-8 />
<title>Delayed modal demo</title>
<link rel="stylesheet" 
href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
</head>
<body>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script 
src="https://cdn.rawgit.com/jackmoore/colorbox/master/jquery.colorbox- 
min.js"></script>

<script>
  <!-- Code here -->
  setTimeout(function(){
$.colorbox({
html:"How to Add Link and img here    ",
className: "cta",
width: 350,
height: 150
});
}, 1000);

</script>

</body>
</html>

Answer 1

试试这段代码。

setTimeout(function(){
    $.colorbox({
        html:"<a href=''><img src='image.jpg'></a>",
        className: "cta",
        width: 350,
        height: 150
    });
}, 1000);

Answer 2

根据文档，Colorbox接受html。使用以下语法：

html:"How to Add <a href='https://google.com'>Link</a> and img <img src='http://www.jacklmoore.com/img/jackmoore.jpg' /> here ",

或转义引号：

html:"How to Add <a href=\"https://google.com\">Link</a> and img <img src=\"http://www.jacklmoore.com/img/jackmoore.jpg\" /> here ",

以下是一个工作示例：

＆＃13;

<html>
<head>
<meta charset=utf-8 />
<title>Delayed modal demo</title>
<link rel="stylesheet" 
href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
</head>
<body>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

<script>
  <!-- Code here -->
  setTimeout(function(){
    $.colorbox({
    html:"How to Add <a href='https://google.com'>Link</a> and img <img src='http://www.jacklmoore.com/img/jackmoore.jpg' /> here    ",
    className: "cta",
    width: 350,
    height: 150
    });
  }, 1000);

</script>

</body>
</html>

＆＃13;

如何在Javascript中使用HtmlTags？

2 个答案: