# Sweet Alert swal に複数 content

npm でインストールすることできますが、ちょっと古いプロジェクトのメンテナンスをやっているので、CDN 引用の方が手軽

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

いつの間に SweetAlert2 まで出ているようで、vuejs reactjs などの対応もバッチリですが、ドキュメントが難しそうなので、とりあえずでできる SweetAlert1 の方にします。

// Hello world
swal("Hello world!");

// "warning", "error", "success" and "info" 4つのスタイル
swal("Good!", "This is success style!", "success");
swal({
  title: "Good!",
  text: "使い方が簡単!",
  icon: "info",
  value: true,
  visible: true,
  className: "",
  closeModal: true,
});

// ポップアップにinput入力を設置
swal({
  content: "input",
});

// ポップアップinputをカスタマイズ
swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your message here...",
      type: "text",
    },
  },
});

ポップアップに複数 input や好きに HTML タグ設置

let section = document.createElement("div");
section.innerHTML = `<label>HTMLいっぱい書ける<input placeholder="label input 一緒に書ける" style="text-align:right;" value=""/></label>`;
swal({
  title: "Sweet Alert粋だね",
  text: "複数contentを設定する",
  content: section,
  buttons: true,
  },
}).then((value) => {
    if(!value)return
});

参考sweetalert.js ドキュメント (opens new window)

2021-03-30
  • javascript

関連記事

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
Javascript 非同期処理 async と await のメモ
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Cookie localStorage sessionStorage の違い
大きいファイルをスライス分割してアップロード
javascript 日本語 shift-js 対応 CSV ダウンロード
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
javascript 配列 重複排除
Javascript DataTables で excel 風 table 作る
国際化 i18n と地域化 L10N
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
Jsconfig と Tsconfig
キーコード取得 & キーコード一覧
ReferenceError: location is not defined
moment.js 使って日本語曜日対応
nodejs 使う時のエラーたち
Nuxtjs 動的なルーティング静的ページ自動生成
Javascript 電話番号フォーマット
javascript password generator ランダム文字列パスワード作成
vuejs で omisejapan の決済フォーム作成した時のメモ
react 強制的にレンダリングする方法
javascript reduce 連想配列の合計計算覚えよう
javascript  指定場所にスムーズにスクロールする方法
javascript で作る html から PDF 変換 pdfmake の日本語対応
正規表現一覧 よく使う検索・置換のパターン
vuejs back to top button component 作成
javascript 開発で出会った TypeError
Javascript var let const 変数宣言の違い
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
nuxtjs と codeigniter で jwt システム構築
開発におけるコーディングルール・規約
開発時によく使うゼロ埋めパディング作業まとめ