sweet-alert display HTML code in text

前端 未结 11 1298
梦谈多话
梦谈多话 2020-12-24 01:52

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

相关标签:
11条回答
  • 2020-12-24 02:18

    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 讨论(0)
  • 2020-12-24 02:20

    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 讨论(0)
  • 2020-12-24 02:20

    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 讨论(0)
  • 2020-12-24 02:23

    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 讨论(0)
  • 2020-12-24 02:24

    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 讨论(0)
  • 2020-12-24 02:26

    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 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题