# 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

関連記事

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