# 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" ４つのスタイル
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
});