CODEWITHSUNDEEP
javascripthtmlcsssweetalert
Miren Igone Bruna Dominguez
Miren Igone Bruna Dominguez

Reputation: 51

Sweet alert html option

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!

Upvotes: 5

Views: 16003

Answers (2)

MaVRoSCy
MaVRoSCy

Reputation: 17839

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.

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29257

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>

Upvotes: 8

Related Questions