I am using sweet-alert plugin to display an alert. With a classical config (defaults), everything goes OK. But when I want to add a HTML tag into the TEXT, it display
-
Use SweetAlert's html
setting.
You can set output html direct to this option:
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
html: "Testno sporocilo za objekt " + hh + "",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
Or
swal({
title: "" + txt + "",
html: "Testno sporocilo za objekt <b>teste</b>",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
讨论(0)
-
As of 2018, the accepted answer is out-of-date:
Sweetalert is maintained, and you can solve the original question's issue with use of the content option.
讨论(0)
-
I just struggled with this. I upgraded from sweetalert 1 -> 2. This library: https://sweetalert.js.org/guides/
The example from documentation "string" doesn't work as I expected. You just can't put it like this.
content: `my es6 string <strong>template</strong>`
How I solved it:
const template = (`my es6 string <strong'>${variable}</strong>`);
content: {
element: 'p',
attributes: {
innerHTML: `${template}`,
},
}
There is no documentation how to do this, it was pure trial and error, but at least seems to work.
讨论(0)
-
There's sweet Alert version 1 and 2.
Actual version 2 works with HTML nodes.
I have a Sweet Alert 2 with a data form that looks this way:
<script>
var form = document.createElement("div");
form.innerHTML = `
<span id="tfHours">0</span> hours<br>
<input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
onchange="window.changeHours(this.value)"
oninput="window.changeHours(this.value)"
><br>
<span id="tfMinutes">0</span> min<br>
<input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
onchange="window.changeMinutes(this.value)"
oninput="window.changeMinutes(this.value)"
>`;
swal({
title: 'Request time to XXX',
text: 'Select time to send / request',
content: form,
buttons: {
cancel: "Cancel",
catch: {
text: "Create",
value: 5,
},
}
}).then((value) => {
console.log(value);
});
window.changeHours = function (value){
var tfHours = document.getElementById("tfHours");
tfHours.innerHTML = value;
}
window.changeMinutes = function (value){
var tfMinutes = document.getElementById("tfMinutes");
tfMinutes.innerHTML = value;
}
Have a go to the Codepen Example!
讨论(0)
-
All you have to do is enable the html variable to true.. I had same issue, all i had to do was html : true ,
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
text: "Testno sporocilo za objekt " + hh + "",
html: true,
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
Note: html : "Testno sporocilo za objekt " + hh + "",
may not work as html porperty is only use to active this feature by assign true / false value in the Sweetalert.
this html : "Testno sporocilo za objekt " + hh + "",
is used in SweetAlert2
讨论(0)
-
I was upgrading from old sweetalert and found out how to do it in the new Version (official Docs):
// this is a Node object
var span = document.createElement("span");
span.innerHTML = "Testno sporocilo za objekt <b>test</b>";
swal({
title: "" + txt + "",
content: span,
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
讨论(0)
- 热议问题