甜蜜的警报 html 选项

Sweet alert html option

本文关键字：html 选项 甜蜜      更新时间：2023-09-26

我正在尝试使用 html 选项发出甜蜜的警报：

swal({  
   title: "HTML <small>Title</small>!",  
   text: "A custom <span style="color:#F8BB86">html<span> message.",   
   html: true 
});

但是，我没有放置该文本放置一个按钮，而是尝试了这个按钮：

var boton = "button";
swal({   
    title: "HTML <small>Title</small>!",  
    text: "<input type=" + boton + ">",  
    html: true 
});

但它不起作用！（我想制作一些类似带有选项（按钮）的菜单）有人知道如何做这样的事情吗？谢谢！

您可以使用

button标签代替input 。

喜欢这个：

var boton = "button";
swal({   
    title: "HTML <small>Title</small>!",  
    text: '<button type="' + boton + '">Button</button>',
    html: true 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

该按钮未显示在警报中的原因是，默认情况下，有关inputs的 css 规则设置为隐藏它们。

您可以使用以下命令覆盖糖果的默认 css 行为：

.sweet-alert input {
  display: initial !important;
}

我的建议是给你的输入一个类，并在你的CSS中添加明确的规则，这样它就不会干扰插件使用的任何其他input标签。

相关文章：