[英]HTML in Sweet Alert
這已被多次回答,但似乎 Sweet Alert 已經進行了更改並且 html:true 不再有效,只是嘗試添加一個可點擊的 URL
文檔說不再使用 HTML。 相反,使用內容對象。 但他們並沒有真正提供任何例子
下面的代碼有效,但顯示整個<a href .... </a>
而不僅僅是 CLICK HERE
swal({
title: "TITLE HERE",
//text: "<a href='#'>CLICK HERE<a>",
html: true
});
這段代碼應該可以工作。 您可以使用content
,現在具體的DOM元素
var el = document.createElement("a");
el.href = "www.stackoverflow.com";
el.innerText = "Click here";
swal("Write something here:", {
content: el,
});
在這里檢查: https : //sweetalert.js.org/docs/#content
如示例所示,您可以將滑塊輸入傳遞給警報
這是一個工作小提琴https://jsfiddle.net/vq13hac4/2/
Sweet Alert 可以為您處理 html 元素的創建。 所以 Niladri 的答案可以改寫為:
swal("Write something here:", {
content: {
element: "a",
attributes: {
href: "http://www.stackoverflow.com",
innerText: "Click here"}}});
@Niladri 選項適用於 Sweet Alert 2。
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(slider.value);
});
我創建了一個 Codepen,里面有一個 Sweet Alert 表單數據。 在這里試試吧!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.