71

sweet-alert プラグインを使用してアラートを表示しています。従来の構成 (デフォルト) では、すべて問題なく動作します。しかし、HTMLタグをTEXTに追加したい場合、<b>...</b>太字にせずに表示されます。答えを検索した後、適切な検索ワードがないようです...

スイート アラートを HTML コードでもテキスト表示する方法は?

var hh = "<b>test</b>";
swal({
    title: "" + txt + "", 
    text: "Testno  sporocilo za objekt " + hh + "",  
    confirmButtonText: "V redu", 
    allowOutsideClick: "true" 
});
4

12 に答える 12

74

タイトルとテキスト パラメーターの HTML を許可する機能が、GitHub のマスター ブランチへの最近のマージで追加されましたhttps://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d

JSON 構成を使用して、'html' を true に設定するだけです。

swal({ html:true, title:'<i>TITLE</i>', text:'<b>TEXT</b>'});

これは 1 週間も経たないうちにマージされ、README.md で示唆されています (明示的には説明されていませんが、例の 1 つで html が false に設定されています)。ただし、マーケティング ページhttp://tristanedwards.meにはまだ記載されていません。 /sweetalert

于 2015-01-23T09:49:01.970 に答える
2

sweet Alert バージョン 1 と 2 があります。実際のバージョン 2 は HTML ノードで動作します。

次のようなデータ フォームを持つ Sweet Alert 2 があります。

<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;
 }

Codepen の例をご覧ください。

于 2020-06-07T22:07:46.277 に答える
1

私の答えが遅すぎるかもしれないことはわかっていますが、私に適した修正を見つけました。

  1. HTMLコンテンツに保持するオブジェクトを作成します

var html_element = '<p><code>This</code> is an error</p>';

  1. 次に、甘いアラート要素の作成に進みます
swal({
    title: "My Title", 
    text: "",  
    html: true,  
    confirmButtonText: "Okay" 
});

  1. javascript setTimeout関数を使用して、html をスイート アラートに追加します。タイムアウトを210に設定するとうまくいくことがわかりました

    setTimeout(function(){
     $('.sweet-alert p:eq(0)').html(html_element)
},210);

そして、あなたはそれをしました！

于 2021-06-18T15:40:58.747 に答える
-11

</文字列内では受け入れられないと思います。

スラッシュ「/」の前にバックスラッシュ「\」を付けてエスケープしてみてください。次に例を示します。

var hh = "<b>test<\/b>";
于 2014-11-10T09:32:37.677 に答える