🐈

モーダルを一定時間表示して自動で消す（JavaScript）

2023/11/22に公開

Bootstrap

概要

何かしらの処理をした時に、処理ができた旨をモーダルで一定時間だして消すって感じの処理をした時のメモ。

モーダルにはBootstrapを利用しており、モーダルが表示されたときのイベントshown.bs.modalをキャッチして指定時間後に消すだけ。

急に消すのではなくフェードアウトを用いてふわっと消す。

コード

// '.modal-auto-clear' クラスを持つ要素に対して、'shown.bs.modal' イベントが発生したときに実行する処理
$('.modal-auto-clear').on('shown.bs.modal', function () {
    
    // $(this) は '.modal-auto-clear' 要素を指す
    // 3000ミリ秒（3秒）の遅延後、モーダルを200ミリ秒かけてフェードアウトさせる
    $(this).delay(3000).fadeOut(200, function () {
        
        // フェードアウトが完了した後、モーダルを非表示にする
        $(this).modal('hide');
    });
});

上記コードではHTML上のオブジェクトの指定方法はjQueryを用いている。
jQueryをインポートしないならピュアなJavaScriptで要素を指定する書き方に直す必要ある。

（例）
jQuery

$('.modal-auto-clear')

ピュアなJavaScript

var modalElement = document.querySelector('.modal-auto-clear');

概要

コード

Discussion