HTML 在甜蜜警报中

Question

这个问题已经回答了好几次，但似乎 Sweet Alert 已经做出了改变，html:true 不再有效，只是想添加一个可点击的 URL

文档说 HTML 不再使用。相反，使用内容对象。但他们并没有真正提供任何例子

下面的代码有效，但显示整个 <a href .... </a> 而不仅仅是点击这里

swal({
  title: "TITLE HERE",
  //text: "<a href='#'>CLICK HERE<a>",
  html: true
});

Answer 1

此代码应该有效。您现在可以将 content 与特定 DOM 元素一起使用

var el = document.createElement("a");
el.href = "www.whosebug.com";
el.innerText = "Click here";
swal("Write something here:", {
  content: el,
});

在此处检查： https://sweetalert.js.org/docs/#content

如示例所示，您可以将滑块输入传递给警报

这是一个有效的 fiddle https://jsfiddle.net/vq13hac4/2/

Answer 2

Sweet Alert 可以为您处理 html 元素的创建。所以 Niladri 的答案可以改写为：

swal("Write something here:", {
    content: {
        element: "a",
        attributes: {
            href: "http://www.whosebug.com",
            innerText: "Click here"}}});

Answer 3

@Niladri 选项适用于 Sweet Alert 2。

      var form = document.createElement("div");
      form.innerHTML = `
      <span id="tfHours">0</span> hours<br>
      <input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
      onchange="window.changeHours(this.value)"
      oninput="window.changeHours(this.value)"
      ><br>
      <span id="tfMinutes">0</span> min<br>
      <input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
      onchange="window.changeMinutes(this.value)"
      oninput="window.changeMinutes(this.value)"
      >`;

      swal({
        title: 'Request time to XXX',
        text: 'Select time to send / request',
        content: form,
        buttons: {
          cancel: "Cancel",
          catch: {
            text: "Create",
            value: 5,
          },
        }
      }).then((value) => {
        //console.log(slider.value);
      });

我创建了一个 Codepen，里面有 Sweet Alert 表单数据。 Try it here!

HTML 在甜蜜警报中

HTML in Sweet Alert

javascript

jquery

sweetalert