こんにちは、さるまりんです。
削除ボタン。押していきなり削除される。わかります。
でも念押ししてほしいこともありますね。「本当にいいの？」って。
そんな時には確認のためのダイアログを表示してくれると安心して「いいよ」って進めます。
確認ダイアログを表示
confirm()を使って簡単に表示することができます。
<button onclick="confirm('確認します！');">押してみて</button>クリックしたら表示されましたか？確認ダイアログです。
confirm()は渡された文字列でダイアログを表示、OKボタンとキャンセルボタンを表示します。OKボタンを押した時にtrue、キャンセルボタンを押した時にfalseをそれぞれ返してくれますので、それによって条件分岐し処理を行うことができます。
こんな感じです。
<a href="javascript:void(0);" onclick="var yes=confirm('本当に？'); if (yes) alert('承知しました。削除します。'); return false;">削除</a>今度はボタンではなく、リンクにしてあります。
実際に利用する時は「削除します」のalert()をhref.location="削除機能のURL"のようにすれば、削除の時に確認を一度はさむことができるようになります。
これで削除ボタンを怖がる必要はなくなりましたね。
confirm()はブラウザが用意してくれているダイアログを表示するため、設置されたページと雰囲気が違ったりします。雰囲気ぴったりのダイアログを使いたい。そんな時は独自でデザインして実装します。その方法はまた書いていきたいと思います。
読んでくださってありがとうございます。
それではまた！