如何在Sweet Alert中使用html标签

Question

var text += '<b>Hii This is Error<b>';
swal("Required", text, "error");

如何在 Bootstrap Sweet 警报插件中使用 html 编码。

在上面的代码中，我必须编写错误消息！才能在sweetalert中显示。但是在文本变量中使用 html 标签时，它会作为字符串， 并且相同的字符串可以显示在 sweetalert 中，但它无法在 html 标签中转换。

Answer 1

您必须添加

html:true

才能显示 HTML 内容，例如，

swal({
  title: "Required",
  text: "<b>Hii This is Error<b>",
  html: true, // add this if you want to show HTML
  type: "error" // type can be error/warning/success
});

阅读 Sweetalert 配置。

Answer 2

你应该试试这个

swal({   
    title: "Error",  
    text: '<b>Hii This is Error<b>',
    html: true 
});

甜蜜的警报文档

Answer 3

swal({
title: "Required",
text: "<b>Please fill the required fields</b>",
html: true,
type: "error"
});

Answer 4

在SweetAlert 2.0中你不能使用html标签， 他们在他们的指南中提到过。

我使用过的 SweetAlert 2.0 可以做到这一点，它对我有用，就是创建 html 并将其作为内容对象传递给 swal，就像这里 或下面的示例。

HTML 内容

var htmlContent = document.createElement("div");
htmlContent.innerHTML = "Create your html the way you want just as usual in 
<strong>JavaScript</strong> code.";

小燕子

swal({
    title: "You did it.",
    content: htmlContent,
    icon: "warning",
    ...
})

Answer 5

感谢所有贡献者。

在我的一个项目中，我使用了 Sweet Alert 1，下面的代码非常适合我......

<script>
  var contents = "<b><h3>Your have successfully setup your basic account! You will now be redirected to the dashboard.</h3></b><br><small><em>Redirecting in 10 seconds....</em></small>"; 
swal({
  title: "Congratulations!!!",
  text: "" + contents + "",
  html: true, 
  type: "success",
  timer: 10000,
  showConfirmButton: true
}, function(){
      window.location='dashboard';
});
</script>

请不要忘记添加以下 CDN JS 脚本和链接

https://code.jquery.com/jquery-2.1.3.min.js

https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js

https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css

成功...