jQuery メッセージダイアログ Toastr

Toastrとは

jQueryを利用した画面上のPopupメッセージダイアログプラグイン
https://codeseven.github.io/toastr/

設定

<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js”></script>
<link href=”https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css” rel=”stylesheet” />
<script>
　オプション
　toastr.options = {
　　”closeButton”: false,　 // Closeボダン「X」を表示する場合はtrue
　　”progressBar”: false,　 // 自動でtoastが閉じられるまで時間を表示する場合はtrue
　　”positionClass”: “toast-top-right”,
　　”preventDuplicates”: false,
　　”onclick”: null,
　　”showDuration”: “300”,
　　”hideDuration”: “1000”,
　　”timeOut”: “5000”,
　　”extendedTimeOut”: “1000”,
　　”showEasing”: “swing”,
　　”hideEasing”: “linear”,
　　”showMethod”: “fadeIn”,
　　”hideMethod”: “fadeOut”
　　};

　実行
　toastr.info(‘info’);
　toastr.success(‘success’);
　toastr.warning(‘warning’);
　toastr.error(‘error’);
</script>

実行

toastr.info(‘info’);
toastr.success(‘success’);
toastr.warning(‘warning’);
toastr.error(‘error’);

オプション

表示位置

　toastr.options = {
　　”positionClass”: “toast-top-right“,
　};
　で指定

以下を設定可能
Top Right
Bottom Right
Bottom Left
Top Left
Top Full Width
Bottom Full Width
Top Center
Bottom Center