甜蜜警報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;
}

我建議給你的輸入一個類，並在你的CSS中添加顯式規則，這樣它就不會干擾插件使用的任何其他input標簽。