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

Follow me!