Sweet alert html option

Question

I'm trying to make an sweet alert with the html option:

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

But instead of that text put a button, I have tried this one:

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

but it doesn't work! (I want to make something like a menu with options(the buttons)) Does anybody know how to do something like that? Thanks!

Solution 1

You can use 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>

Solution 2

The reason why the button is not shown in the alert is because the css rules regarding inputs are by default set to hide them.

You can override the default css behavior of sweetalets by using:

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

What I would suggest is give a class to your input, and add explicit rules in your CSS so it doesn't interfere with any other input tags used by the plugin.