甜蜜警报 html 选项答案

【问题标题】：Sweet alert html option甜蜜警报 html 选项
【发布时间】：2017-07-31 19:09:28
【问题描述】：

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

但它不起作用！（我想制作带有选项（按钮）的菜单之类的东西）有谁知道如何做这样的事情？谢谢！

【问题讨论】：

你能分享小提琴演示吗？
你想要jsfiddle.net/BDhara/xe096w10/160中的文字而不是按钮
sweetalert 是插件吗？
mmm...我想要一个更像是带有 (button1) Option1 (button2) Option2 (button3) Option3 的菜单问题是在第一个代码中，第二个引号可以正常工作（在样式）但是当我尝试我的代码时，它显示一个“html”文件而不是按钮。我的意思是如果你把一个
出现，一个
和其他东西，但输入不起作用一段可能有帮助的代码： if(keyMap & 4){ here the sweet alert }

标签： javascript html css sweetalert

【解决方案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>

【讨论】：

完成了！（我想：/我是新手，我不知道在哪里点击）
谢谢！完成了.. 欢迎来到 StackOverflow ;) 顺便说一下，你也可以upvote（如果你还没有这样做的话）..
很好，mm..你能回答另一个问题吗？如果我想在里面放一个 onclick 怎么办？调用一个函数，例如 checkName();
你的意思是要显示2个按钮：1是OK，1是checkName？
插件无法做到这一点，所以我更新了插件。从github 下载脚本并告诉我它是否有效。

【解决方案2】：

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

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

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

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

【讨论】：