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!

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!

• javascript
• html
• css
• sweetalert

• Can you share the fiddle demo? – Krish Commented Jan 28, 2016 at 10:19
• do u want text instead of button in jsfiddle/BDhara/xe096w10/160 – Dhara Commented Jan 28, 2016 at 10:26
• Is sweetalert a plugin? – ickyrr Commented Jan 28, 2016 at 10:31
• mmm...I want soemthing more like a menu with (button1) Option1 (button2) Option2 (button3) Option3 The thing is that in the first code the second quotation marks work fine (in the style) But when i try my code it shows a "html"file but not the button. I mean if you put a <p> appears,an <br> and other stuffs but the input doesn't work a piece of code that may help: if(keyMap & 4){ here the sweet alert } – Miren Igone Bruna Dominguez Commented Jan 28, 2016 at 10:34

2 Answers 2

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./ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

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.