Sweet alert html option

Question

I am trying to make a sweet warning with the html option:

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

But instead, I press the button text, I tried this:

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

but it will not work! (I want to do something like a menu with options (buttons)) Does anyone know how to do this? Thanks!

Answer 1

You can use the button tag instead of input .

Like this:

 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

The reason the button is not displayed in the warning is because the css rules for inputs by default to hide them.

You can override the default css behavior of css using:

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

What I would suggest is to give a class for input and add explicit rules to your CSS so that it does not interfere with other input tags used by the plugin.