Question

我有以下SweetAlert代码..

<script type="text/javascript" charset="utf-8">
    $('.patient-details').click(function(e) {
        e.preventDefault();
        var name = $(this).attr('data-name');
        var gender = $(this).attr('data-gender');
        var age = $(this).attr('data-age');
        var country = $(this).attr('data-country');
        var state = $(this).attr('data-state');
        var address = $(this).attr('data-address');
        var report = $(this).attr('data-report');
        swal({
            title: name,
            text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
            confirmButtonColor: "#00B4B4",
            imageUrl: "images/avatar/user.png",
        });
    });
</script>

var报告是一个链接，我需要模态中显示的链接。我试过html：true等等。不再使用html。而是使用内容对象。正如医生所说：

https://sweetalert.js.org/docs/#content

https://sweetalert.js.org/guides/

但我作为一个新手无法理解它。

请求帮助，了解如何在新窗口中显示模态中的链接和要打开的链接。

更新由于提供的解决方案不起作用，我使用另一种方法使用html来解决它。需要删除文本，否则文本将是默认的。 Codepen链接： https://codepen.io/pamela123/pen/GOJZgo

Answer 1

正如文档所说，html已被弃用，不再有效。

他们已将html替换为content，而content不再是字符串，而是一个对象。

此content: { element: "input", attributes: { placeholder: "Type your password", type: "password", } }对象如下所示：

content: {
    element: "a",
    attributes: {
      href : report
    }
  }

所以我猜你可以像这样构建自己的链接：

content

...然后只需将swal对象传递给swal({ content: { element: "a", attributes: { href : report } } })：

element:"a"

请注意，这是未经测试的，我不确定var slider = document.createElement("input"); slider.type = "range"; swal({ content: slider });是否有效。但无论如何，该文档提供了一个更好的方法：

var link = document.createElement("a");
link.href= report;

swal({
  content: link
});

所以你可以这样创建一个链接：

$(this)

另外，您可以通过缓存.attr("data-x")（创建起来很昂贵）并重复使用来大量优化您在问题中提供的代码。此外，.data("x")还有一个简写var $this = $(this) var name = $this.data('name'); var gender = $this.data('gender'); var age = $this.data('age'); var country = $this.data('country'); var state = $this.data('state'); var address = $this.data('address'); var report = $this.data('report');。

var attributes = $(this).data()

或更好：

text: "Gender: " + attributes['gender'] +"\n" + "Age: " + attributes['age'] +"\n" + "Country: " + attributes['country'] +"\n" + "State: " + attributes['state'] +"\n" + "Address: " + attributes['address'] +"\n" + "Report: " + attributes['report']

，它提供包含所有数据属性的对象。然后您可以使用：

text: `Gender: ${attributes['gender']}\n
        Age: ${attributes['age']}\n
        Country: ${attributes['country']}\n
        State: ${attributes['state']}\n
        Address: ${attributes['address']}\n
        Report: ${attributes['report']}`

或者在ES6中：）

Fragments

Answer 2

为什么不尝试下面的内容（我从未使用过甜蜜警报，但在阅读完文档后我会尝试这样做）

var link= document.createElement("a");
link.href =  report  // or link.setAttribute("href", report)


swal({
title: name,
text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
confirmButtonColor: "#00B4B4",
imageUrl: "images/avatar/user.png",
content:link
});
});

或

swal({ title: name, text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report, confirmButtonColor: "#00B4B4", imageUrl: "images/avatar/user.png", content:{ element:"a", attributes:{ href:report } } }); });

希望有帮助

Answer 3

如果您仍然无法找到解决方案，我尝试重新创建模式 https://codepen.io/AJALACOMFORT/pen/zPGqNe?editors=0010

window.onload= function(){
  var that = $(".patient-details")
  var name = $(that).attr('data-name');
var gender = $(that).attr('data-gender');
var age = $(that).attr('data-age');
var country = $(that).attr('data-country');
var address = $(that).attr('data-address');
var report = $(that).attr('data-report');

   //creates h2
    var h2 = document.createElement("h2")
        //adds text
        h2.innerHTML = name
  //creates p tag 
    var p = document.createElement("p")
         p.innerHTML =  "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n"  + "Address: " + address +"\n" + "Report: " + report
  //creates button
  var button = document.createElement("button")
    //adds the onclick function
      button.setAttribute("onclick", "callbutton(event)")
  button.innerHTML ="ok"
  button.className += "confirm"
  var link = document.createElement("a")
      link.setAttribute("href", report)
      link.innerHTML ="Link"
      link.className += "report-link"
  //appends all the elements into the mymodal div
  var modal = document.getElementById("modal-inner")
        modal.appendChild(h2)
          modal.appendChild(p)
          modal.appendChild(link)
        modal.appendChild(button)


}
 //listens to click event of the checkbox
  function callbutton(){
      document.getElementById("checkboxabove").checked = false;
  }

希望它有所帮助。（注意我没有像甜蜜警报一样使用相同的过渡效果，所以请随意调整）

Answer 4

正如杰里米·蒂勒于17年10月31日10:36在他的评论中所发现的那样：

对于文本中的简单链接，您无需使用“内容”选项。选项“text”只能显示纯文本，不能显示html。但是，选项“html”可以显示html。

不要与旧版SweetAlert 1.X相混淆：你必须设置html = true。

在SeewtAlert2中，html直接在“html”选项中设置。在这种情况下，请勿使用选项“text”。

在sweetAlert.version ='6.9.1';

中工作正常

Jeremy Thille的例子：

$('.patient-details').click(function(e) {
  e.preventDefault();
  var $this = $(this)
  var name = $this.data('name');
  var gender = $this.data('gender');
  var age = $this.data('age');
  var country = $this.data('country');
  var address = $this.data('address');
  var report = $this.data('report');

  swal({
  title: name,
  html:
      "Gender: " + gender +"<br>" +
     "Age: " + age +"<br>" +
     "Country: " + country +"<br>" +
     "Address: " + address +"<br>" +
     "Report: " + report +"<br>" +
      "<a href='report'>Report</a> " +
     "and other HTML tags"
  });
});

https://codepen.io/jeremythille/pen/wPazMw

Answer 5

找到了这个答案here，所有功劳都归功于 Tristan Edwards

const el = document.createElement('div')
el.innerHTML = "Here's a <a href='http://google.com'>link</a>"

swal({
  title: "Hello!",
  content: el,
})

Javascript Sweet Alert和文本内的html链接

5 个答案: