Question

我有一个带有文字的图像，我希望图像中的这个文字可以点击，但我有一个问题：图像出现在一个警告框内（我使用过甜蜜警报）。当我点击一个按钮时出现一个带有这些图像的警告框，在我看到图像后我想点击其中的文字，我该怎么做？

<html>
  <head>
    <script src="dist/sweetalert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
  </head>
  <body>
    <a onclick="Alert()">Button</a> 

    <script>
      function Alert() {
        swal({
          title: "Sweet!",
          text: "Here's a custom image.",
          imageUrl: "images/image.jpg"
        });
      }
    </script>
  </body>
</html>

Answer 1

SweetAlert2只是创建一个DOM元素。如果您使用开发人员工具进行检查，您会很快发现text包含在swal.getContent()可以获得的元素中。

您可以轻松地在此元素上挂钩单击侦听器。为简单起见，我假设您使用jQuery：

<script>
  function Alert() {
    swal({
      title: "Sweet!",
      text: "<i>Here's a custom image.</i>",
      imageUrl: "images/image.jpg",
      html: true
    });

    $(swal.getContent()).on('click', function(ev) {
         console.log('Do something when the text is clicked');
    });

    $(swal.getImage()).on('click', function(ev) {
         console.log('Do something when the image is clicked');
    });
  }
</script>

希望我能提供帮助。

更新：感谢limonite编辑（您无需查找选择器，swal.getContent()将直接为您提供您正在寻找的元素。）

此外，我添加了html属性作为其他答案中的示例，如果您希望使用“真实”链接，则可以使用<a>标记。

Answer 2

传递html : true选项并将标记放在text选项值中：

swal({
  title: "Sweet!",
  text: "<a href="/your/url">A custom image<a>",
  html: true
});

所以文档说：https://t4t5.github.io/sweetalert/

Answer 3

只需使用html: true即可在警告框的文本中使用html。

swal({
  title: "Sweet!",
  text: "<a href='some_url'>Here's a custom image<a>",
  imageUrl: "images/image.jpg",
  html: true
});

这里是链接http://t4t5.github.io/sweetalert/

您可以向下滚动到HTML消息部分进行检查。

Answer 4

Sweet Alert支持HTML文本。所以你可以轻松做到这样的事情：

<script>
  function Alert() {
    swal({
      title: "Sweet!",
      text: "<a href='www.somelink.com'>Some Clickable Link</a>",
      imageUrl: "images/image.jpg",
      html :true
    });
  }
</script>

我从甜蜜警报网站获得了这些信息！ http://t4t5.github.io/sweetalert/

干杯！

图像内的文字可点击

4 个答案: