削除処理の時などボタン１つで処理を行うのは危険です。
大切なデータがクリックミスなどで削除されてしまうと悲しいことになります
そこで出てくるのが確認のダイヤログです。
よく画面の上の方にポコっと出てくるあれです。
OKで処理を続ける、キャンセルで処理をやめて離脱する
そんな機能を実装してましょう。
実装方法は簡単です。
- まず、jQueryを読み込みます
- 次に、クリックした時に表示させたいボタン、リンクに対してIDを与えます。
- そして、そのIDの要素がクリックされた時にダイヤログを表示させるメソッドを設定します。
以上の手順で進めていきましょう。
#jQueryを読み込みます
<head>内に以下のスクリプトを追記してjQueryをCDN形式で読み込みましょう
内
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
#クリックした時に表示させたいボタン、リンクに対してIDを与えます。
下記が3つの種類のボタン、リンクの例です
どれでもできるので、どれか選んでやってください
大切なのはidを"btn"で設定したところです。
ちなみに、id要素はページに１つしか設定できないので3つ全部はできません
3つ表示する場合はid名を適当に変えてください
<button id="btn">絶対に押すなよ</button>
<a id="btn" href="https://qiita.com">絶対に押すなよ</a>
<form>
<input id="btn" type="submit" value="絶対に押すなよ">
</form>
#IDの要素がクリックされた時にダイヤログを表示させるメソッドを設定します。
btn要素より下に記述してください。
Htmlは上から順に読み込まれるため、まだ要素ができていない状態でjQueyを読み込んでも
動かない時があります。
ページ下部に記述していると間違い無いです。
<script type="text/javascript">
$('#delete-btn').click(function(){
if(!confirm('押すなって言ったじゃないか！！')){
/* キャンセルの時の処理 */
return false;
}else{
/* OKの時の処理 今回は特に処理がないので空*/
}
});
</script>
これで実装は完了です。
##JavaScriptで書くとこんな感じです
jQueryで実装したコードを元のJavaScriptで書くと下記のようになります
<button id="btn">ボタン</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
window.confirm('押すなって言ったじゃないか！！');
})
</script>
以上です！！！
ここまで読んでいただきありがとうございました！！
疑問、気になるところがございましたら、質問、コメントよろしくお願いします！！！