jsでお知らせ、簡易的な通知

このリンクをクリックすると、お知らせが出てきます。

ちかいうちに、プラグイン化してグローバルメソッドで呼べるようにしたい。

//html <div id="box_notifications" data-notification-favorite="true"> <div class="notifications_inner"> </div> </div> //scss #box_notifications { display: block; position: fixed; right: 0; top: 0; width: 100%; z-index: 999999; } #box_notifications .notification { width: 100%; display: block; position: relative; transition: transform 500ms ease,bottom 400ms ease; transform: translateX(105%); padding: 10px 10px 0; z-index:999999; } #box_notifications .notification.is_show { transform: translateX(0); } #box_notifications .notification_content { background-color: #fff; padding: 10px; overflow: hidden; position: relative; min-height: 68px; display: flex; justify-content: center; align-items: center; border: 5px solid #5597e6; background: #fff; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; } #box_notifications .notification_content .notification_content_inner { padding-right: 5px; } #box_notifications .notification_content .notification_close { width: 36px; min-width: 36px; height: 0; margin-left: auto; margin-bottom: auto; position: relative; } #box_notifications .notification_content .icon_close { color: #5597e6; display: block; text-align: center; border: #5597e6 solid 2px; font-size: 18px; line-height: 34px; width: 36px; height: 36px; min-width: 36px; position: absolute; z-index: 1; top: 0; right: 0; } #box_notifications .notification_content .icon_close:before { position: relative; top: -1px; } //script $(function(){ //========================================================== // notifications //========================================================== (function() { var $boxNotifications = $('#box_notifications'); var $boxInner = $boxNotifications.children('.notifications_inner'); if ($boxNotifications.length < 1) { return false; } //---------------------------------------- // 各種関数 //---------------------------------------- //お知らせを出してもいいかどうか function isDisplayOk() { var status = true; //なにかあれば、statusをfalseに return status; } //お知らせHTMLの生成 function createNotificationHtml(innerHtml) { var htmlText = '<div class="notification">' + '<div class="notification_content">' + '<div class="notification_content_inner">' + innerHtml + '</div>' + '<div class="notification_close">' + '<a class="icon_close">×</a>' + '</div>' + '</div>' + '</div>'; return htmlText; } //閉じる挙動(本体) function closeNotification(elm) { elm.removeClass('is_show').delay(500).slideUp(350, function() { elm.remove(); }); } function openNotification(elm) { $boxInner.append(elm); setTimeout(function () { elm.addClass('is_show'); },10); //10秒以上、未操作の場合、消す setTimeout(function () { closeNotification(elm); },5000); } //自ら、お知らせを閉じる挙動 $(document).on('touchstart click','.notification_close .icon_close',function() {//汎用 closeNotification($(this).closest('.notification')); return false; }); //---------------------------------------- // 通知 //---------------------------------------- $('#demo').on('click',function(){ demo(); return false; }); demo(); function demo(){ if (!$boxNotifications.data('notification-favorite')) { return false; } var texts = '<p>これはデモテキストです。</p>'; function someNotification() { setTimeout(function () { if (isDisplayOk()){ var $notification = $(createNotificationHtml(texts)); openNotification($notification); } else { someNotification(); } },500); } someNotification(); }; })(); });

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。


  1. KATOON.NET
  2. TRASH
  3. jsでお知らせ、簡易的な通知