甜蜜警报 html 选项

Question

我正在尝试使用 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 
});

但是没用！（我想制作一个带有选项（按钮）的菜单）有人知道怎么做吗？谢谢！

Answer 1

您可以使用 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>

Answer 2

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

您可以使用以下方法覆盖 sweetalets 的默认 css 行为：

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

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

甜蜜警报 html 选项

Sweet alert html option

html

javascript

css

sweetalert