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!