javascript - 格式化不带 html: 标记的 Sweet Alert 文本

Question

我想更改 Sweet Alerttitle:和text:文本。但由于html:在较新版本的 SweetAlert 中已停产，我想知道如何实现它。

这是我想要文本的格式 -

In the title-
Line 1 //line break here 
Line 2 //line break here
Line 3 //line break here
Line 4 //line break here

In the text-

Line 5 //line break here 
Line 6 //line break here
Line 7 //line break here
Line 8 //lie break here

这是我的代码

网页

 var name = $('#ade_name').val();
             var email = $('#ade_email').val();
             var role = $('#ade_role').val();
             var notf = $('#ade_notf').val();
             var emver = $('#email_verified').val();
             var msg1= "You are going to make the following changes for: ";

              msg1+= " Name= ";
              msg1+= '\t'
             msg1+= name;
             msg1+= '\n\n';
             msg1+= " Email = ";
             msg1+= '\t'
             msg1+=email;
            msg1+= '\n\n';
              msg1+= " Please Double Confirm the details below to continue";
              var msg2 = "Role : ";
              msg2+= $('#ade_role').val();
               msg2+= '\n';
              msg2+= " Mark All Notifications as Unread ? : ";
              msg2+= $('#ade_notf').val();
               msg2+= '\n';
              msg2+= " Mark email as verified? : ";
              msg2+= $('#ade_email_verified').val();
              msg2+= '\n';
              swal({
                 
                  title: msg1,
                  text: msg2,
                  icon: "info",
                  buttons: true,
                  dangerMode: true,
                });

我没有使用\n.

标签： javascripthtmlcss

Answer 1

警报标题中似乎不支持换行符（它应该是标题，而不是文章）。

它们在警报正文中得到支持。重新组织您的警报：

$("#alert").click(function () {
    swal({
        title: "Please double-check before continuing",
        text: [
            " Name: " + $('#ade_name').val(),
            " Email: " + $('#ade_email').val(),
            " Role: " + $('#ade_role').val(),
            " Mark All Notifications as Unread? " + $('#ade_notf').is(":checked"),
            " Mark email as verified? " + $('#ade_email_verified').is(":checked")
        ].join("\n"),
        icon: "warning",
        buttons: true,
        dangerMode: true,
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

Name: <input id="ade_name" value="user name"><br>
Email: <input id="ade_email" value="user email"><br>
Role: <input id="ade_role" value="user role"><br>
<input id="ade_notf" type="checkbox"> Mark All Notifications as Unread<br>
<input id="ade_email_verified" type="checkbox"> Mark email as verified<br>
<button id="alert">Show</button>