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!

do u want text instead of button in http://jsfiddle.net/BDhara/xe096w10/160/ — Dhara, Jan 28 '16 at 10:26
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
appears,an
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, Jan 28 '16 at 10:34

score 8 · Accepted Answer · answered Jan 28 '16 at 10:35

8

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>

answered Jan 28 '16 at 10:35

Mosh Feu

28,354
16
88
135

Its done! (i think :/ i'm new and i dont know where to click) – Miren Igone Bruna Dominguez Jan 28 '16 at 10:41
Thanks! it's done.. Welcome to StackOverflow ;) By the way, you can [upvote](http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow) too (if you didn't do it already).. – Mosh Feu Jan 28 '16 at 10:45
Thats nice, mm..can you answer another question please? what if I want to put an onclick inside? that calls a function for example checkName(); – Miren Igone Bruna Dominguez Jan 28 '16 at 10:52
Do you mean that you want to show 2 buttons: 1 is OK and 1 is `checkName`? – Mosh Feu Jan 28 '16 at 11:36
I mean one is for checkName() another one to antotherThing() then, doSomething() in other button. edit: the thing is that if i put-> if(keyMap & 4){ show the swal }<- the code just do the onClick function every time I press the button – Miren Igone Bruna Dominguez Jan 28 '16 at 11:50
1

You can't do this with the plugin so I updated the plugin. Download the script from by [github](https://github.com/moshfeu/sweetalert) and tell me if it works. – Mosh Feu Jan 28 '16 at 17:10
i don't know why but in the example(index.html) works but in my code no hahaha . Just copy and paste. i have check the link and script line (on the top) just every thing where is soppose to be. – Miren Igone Bruna Dominguez Jan 28 '16 at 18:04
Any erros in the `console`? – Mosh Feu Jan 28 '16 at 18:58
I chaned only the `dev` script, not the minify. The example use it too. I'm tin to find out how to "compile" it. The plugin use `gump`. For now, take the `dev` version script. – Mosh Feu Jan 29 '16 at 08:44
I use html attribute and write my html code inside it and it works for me. for example: swal({ html:" Link}) – Fereshteh Mirjalili Oct 06 '18 at 06:59

score 1 · Answer 2 · answered Jan 28 '16 at 10:36

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.

Sweet alert html option

2 Answers2