【フォームブリッジ】アラート内にリンクを入れたい

背景・実現したいこと

フォームブリッジの確認画面でアラートを表示させるようにします。

そのアラートの中にクリックしたらそのページが開くというリンクをつけたいです。

 

エラー情報 (開発者ツールのコンソール)

確認画面にアラートを表示させることはできました。

URLはリンクがされず、文字そのままが表示されます。

 

利用したソースコード

(function() {
  "use strict";
  fb.events.confirm.created = [function(state){
    setTimeout(function(){
      alert('下記リンクをご確認ください。\r<a href="https://www.cybozu.com/jp/" target="_blank">ホームページ</a>');
  }, 100);
  }];
})();

NKIさん

こんにちは。

 

alert()だと、リンク貼り付けができませんので、SweetAleatなどを使うと良いです。

SweetAlert

koichiさん

こんにちは。

 

やっと表示させることができました!

SweetAlert2を使用しました。

ありがとうございます!!

 

申し訳ありませんが、あと2つお聞きしたいことがあります。

①アイコンを入れたいなと思い、type: “warning” を入れたのですが、consoleに下記が出ました。

sweetalert2.min.js:1 SweetAlert2: Unknown parameter “type”

他のタイトルやメッセージなどは、ちゃんと表示されています。

アイコンだけが出ていない状態です。

(function() {
  "use strict";
  fb.events.confirm.created = [function(state){
    Swal.fire({
      type: "warning",
      title: "確認してください!",
    text: "下記『表示する』をクリックして、注意事項をお読みください。",
    footer: '<a href="https://www.cybozu.com/jp/" target="_blank">表示する</a>',
    });
  }];
})();

 

②text: 内のメッセージは、中央揃えになっていますが、左寄せにできるのでしょうか?

div alignを試しましたが、できませんでした。

 

よろしくお願い致します。

NKIさん

ご確認いただきありがとうございます。

 

SweetAlert2のv9以上は、typeではなくiconでの指定となります。

textは、ただのテキストでしか表現ができないため、htmlにしていただくと、div alignが使えます。

 

Swal.fire({
icon: 'warning',
title: '確認してください!',
html: '<div style="text-align:left">下記『表示する』をクリックして、注意事項をお読みください。</div>',
footer: '<a href="https://www.cybozu.com/jp/" target="_blank">表示する</a>',
});

koichiさん

何度もありがとうございます。

 

SweetAlert2のv9以上は、typeではなくiconでの指定となります。

textは、ただのテキストでしか表現ができないため、htmlにしていただくと、div alignが使えます。

そうだったのですね。調べきれていませんでした。

ご指摘いただいた部分を修正し、無事やりたいことが実現できました。

ありがとうございました。

 

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。