HTML网页右下角弹出消息通知提示框

最新推荐文章于 2024-06-19 22:40:10 发布

小流年 °

最新推荐文章于 2024-06-19 22:40:10 发布

阅读量1.6k

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/SmileSunshines/article/details/134710177

版权

Naranja网页右下角弹出消息通知提示框js代码，点击按钮触发，包含了4种消息提示框样式：默认(log)、成功(success)、警告(warn)、危险 (error)。
实现截图如下：

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/naranja.css" />
	</head>
	<body>
		<div class="col-md-2"><button class="btn btn-error" onclick="narn('log')">默认（log）</button></div>
		<div class="col-md-2"><button class="btn btn-success" onclick="narn('success')">成功（success）</button></div>
		<div class="col-md-2"><button class="btn btn-warning" onclick="narn('warn')">警告（warn）</button></div>
		<div class="col-md-2"><button class="btn btn-danger" onclick="narn('error')">危险（error）</button></div>
	</body>
	<script type="text/javascript" src="js/naranja.js"></script>
	<script type="text/javascript">
		function narn(type) {
			naranja()[type]({
				title: '新消息提示',
				text: '单击“接受”以创建新通知',
				timeout: 'keep',
				buttons: [{
					text: '接受',
					click: function(e) {
						naranja().success({
							title: '通知',
							text: '通知被接受'
						})
					}
				}, {
					text: '取消',
					click: function(e) {
						e.closeNotification()
					}
				}]
			})
		}
	</script>
</html>

css

.naranja-notification {
	height: 0;
	box-sizing: content-box;
	padding: 10px 0;
	transition: padding .7s cubic-bezier(0, .5, 0, 1), height .7s cubic-bezier(0, .5, 0, 1)
}

.naranja-notification * {
	box-sizing: border-box
}

.naranja-notification .narj-log {
	background-color: #F9F9F9
}

.naranja-notification .narj-log button {
	border: 1px solid #D2D2D2;
	background-color: white
}

.naranja-notification .narj-log button:first-of-type {
	color: #0099E5
}

.naranja-notification .narj-success {
	background-color: #B8F4BC
}

.naranja-notification .narj-success button {
	border: 1px solid #6ED69A;
	background-color: #B8F4BC;
	opacity: .9;
	color: #11B674
}

.naranja-notification .narj-success button:first-of-type {
	opacity: 1
}

.naranja-notification .narj-warn {
	background-color: #FFDD85
}

.naranja-notification .narj-warn button {
	border: 1px solid #F5CE69;
	background-color: #FFDD85;
	opacity: .9;
	color: #D9993F
}

.naranja-notification .narj-warn button:first-of-type {
	opacity: 1
}

.naranja-notification .narj-error {
	background-color: #ED9286
}

.naranja-notification .narj-error button {
	border: 1px solid #ED8476;
	background-color: #ED9286;
	opacity: .9;
	color: #C24343
}

.naranja-notification .narj-error button:first-of-type {
	opacity: 1
}

.naranja-notification .naranja-body-notification {
	animation: .4s fadeUpIn 1 cubic-bezier(0, .5, 0, 1);
	position: relative;
	display: flex;
	width: 310px;
	border-radius: 4px;
	padding: 7px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
	margin-bottom: 7px;
	margin-top: 12px;
	opacity: 1;
	transition: opacity .15s ease, marginTop .3s ease, marginBottom .3s ease, padding .3s ease
}

.naranja-notification .naranja-body-notification:hover .naranja-close-icon {
	opacity: .7
}

.naranja-notification .naranja-body-notification:hover .naranja-close-icon:hover {
	opacity: 1
}

.naranja-notification .naranja-body-notification>div {
	display: inline-flex;
	justify-content: center;
	align-items: center
}

.naranja-notification .naranja-body-notification .naranja-text-and-title {
	padding-left: 15px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start
}

.naranja-notification .naranja-body-notification .naranja-text-and-title>p {
	margin: 5px;
	font-family: 'Open Sans'
}

.naranja-notification .naranja-body-notification .naranja-text-and-title>div {
	width: 100%
}

.naranja-notification .naranja-body-notification .naranja-text-and-title>div button {
	float: right;
	margin-left: 6px;
	margin-top: 10px;
	margin-bottom: 2px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	border-radius: 3px;
	padding: 2px 11px;
	font-size: 14px;
	text-align: center;
	outline: none;
	border-width: 1px;
	box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
	cursor: pointer
}

.naranja-notification .naranja-body-notification .naranja-text-and-title>div button:active {
	opacity: .7
}

.naranja-notification .naranja-body-notification .naranja-title {
	font-size: 20px;
	opacity: 1
}

.naranja-notification .naranja-body-notification .naranja-parragraph {
	font-size: 14px;
	opacity: .6;
	padding-right: 30px;
	line-height: 1.4em
}

.naranja-close-icon {
	position: absolute;
	right: 7px;
	top: 7px;
	opacity: 0;
	cursor: pointer;
	transition: opacity .25s ease
}

@keyframes fadeUpIn {
	from {
		opacity: .2;
		box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
		transform: scale(.95)
	}
	75% {
		opacity: 1
	}
	to {
		opacity: 1;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
		transform: scale(1)
	}
}

.naranja-notification-box {
	box-sizing: content-box;
	display: flex;
	flex-direction: column-reverse;
	position: fixed;
	bottom: 0;
	right: 0;
	/*width: 315px;*/
	height: auto;
	max-height: 100vh;
	overflow: auto;
	padding: 8px;
	padding-top: 20px
}

.naranja-notification-box .naranja-notification-advice {
	position: fixed;
	right: 138px;
	top: -39px;
	transform: translateY(0);
	cursor: pointer;
	transition: transform .3s ease
}

.naranja-notification-box .naranja-notification-advice.active {
	transform: translateY(60px)
}

js

// bip sound
// http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3
 
(function (factory) {
 
  // checking for exports avalible
  if (typeof module !== 'undefined' && module.exports) {
    // export Collection
    module.exports = factory
  } else {
    // else add to root variable
    window['naranja'] = factory
  }
 
})(function () {
 
  function setSideUpAnimation (finalNotification) {
    setTimeout(function () {
 
      var notificaciónHeight = finalNotification
        .querySelector('.naranja-body-notification')
        .offsetHeight
 
      finalNotification.style.height = notificaciónHeight + 'px'
    }, 0)
  }
 
  function createText (text) {
    return document.createTextNode(text)
  }
 
  /**
  * provide a reusable way to create html
  * elements
  * @param tag String – html tag name
  * @param classes Array<String> – html tag classes
  */
 
  function createElement (tag, classes) {
    var $HTMLElement = document.createElement(tag)
    if ( !!classes ) {
      classes.forEach(function (className) {
        $HTMLElement.classList.add(className)
      })
    }
 
    return $HTMLElement
  }
 
  var $narjContainer = document.querySelector('.naranja-notification-box')
 
  if (!$narjContainer) {
    $narjContainer = createElement('div', ['naranja-notification-box'])
    $newNotificationsAdvice = createElement('div', ['naranja-notification-advice'])
    $newNotificationsAdvice.addEventListener('click', function () {
      $narjContainer.scrollTop = '0'
    })
    $narjContainer.appendChild($newNotificationsAdvice)
 
    document.body.appendChild($narjContainer)
  }
 
  $narjContainer.__proto__.unshifElement = function (node) {
    this.insertBefore(node, this.childNodes[0])
  }
 
  $narjContainer.addEventListener('scroll', function (e) {
    if (e.currentTarget.scrollTop < 20) {
      $newNotificationsAdvice.classList.remove('active')
    }
  })
 
  return {
    log: function (argm) {
      this.createNotification('log', argm)
    },
    success: function (argm) {
      this.createNotification('success', argm)
    },
    warn: function (argm) {
      this.createNotification('warn', argm)
    },
    error: function (argm) {
      this.createNotification('error', argm)
    },
 
    /*
    * Internal methods for
    * launch notifications
    */
    createNotification: function (type, argm) {
 
      this.type = type
      this.title = argm.title
      this.text = argm.text
      this.icon = (argm.icon === undefined) ? true : argm.icon
      this.buttons = argm.buttons
 
      var $notification = this.$createContainer()
      var $body = $notification.querySelector('div')
 
      this.$notification = $notification
      this.$body = $body
 
      // render icon if exists
      if (this.icon) {
        var $iconContainer = createElement('div', [
          'naranja-icon',
          'narj-icon-' + type
        ])
 
        $iconContainer.innerHTML = this.chooseIcon[type]
 
        $body.appendChild($iconContainer)
      }
 
      var $title = this.createTitle()
      var $text = this.createText()
 
      var $textAndTitleContainer = createElement('div', [
        'naranja-text-and-title'
      ])
 
      $textAndTitleContainer.appendChild($title)
      $textAndTitleContainer.appendChild($text)
 
      $body.appendChild($textAndTitleContainer)
 
      // render buttons fragment if exists
      if (this.buttons) {
        var $buttons = this.createButtons($notification, $body)
 
        $body
          .querySelector('.naranja-text-and-title')
          .appendChild($buttons)
      }
 
 
      var $close = createElement('div', [
        'naranja-close-icon'
      ])
 
      $close.addEventListener('click', (function () {
        this.closeNotification()
      }).bind(this))
 
      // var $close = document.createElement('div')
      // $close.classList.add('naranja-close-icon')
      $close.innerHTML = this.chooseIcon.close
 
      $body.appendChild($close)
 
      $narjContainer.unshifElement($notification)
      setSideUpAnimation($notification)
 
      if ($narjContainer.scrollTop > 20) {
        $newNotificationsAdvice.classList.add('active')
        $newNotificationsAdvice.innerHTML = this.chooseIcon.newNotification
      }
 
      if (argm.timeout !== 'keep') {
        setTimeout(
          (function () {
            this.closeNotification()
          }).bind(this),
          argm.timeout || 5000
        )
      }
    },
    $createContainer: function () {
      // generate box for notification
 
      var $container = createElement('div', [
        'naranja-notification',
        'naranja-' + this.type
      ])
 
      var $innerContainer = createElement('div', [
        'naranja-body-notification',
        'narj-' + this.type
      ])
 
      $container.appendChild($innerContainer)
 
      return $container
    },
    createTitle: function () {
      var $parragraph = createElement('p', [
        'naranja-title'
      ])
      var $tt = createText(this.title)
      $parragraph.appendChild($tt)
 
      return $parragraph
    },
    createText: function () {
      var $title = createElement('p', [
        'naranja-parragraph'
      ])
 
      var $tx = document.createTextNode(this.text)
      $title.appendChild($tx)
 
      return $title
    },
    createButtons: function ($notification, $body) {
      var $buttonsContainer = createElement('div', [
        'naranja-buttons-container'
      ])
 
      var self = this
 
      this.buttons.forEach(function (button) {
        var $buttonElement = createElement('button')
        $buttonElement.appendChild(document.createTextNode(button.text))
 
        $buttonElement.addEventListener('click', function (event) {
 
          self.removeNotification = true
          event.preventClose = function () {
            self.removeNotification = false
          }
 
          event.closeNotification = function () {
            self.closeNotification()
          }
 
          button.click(event)
 
          if (self.removeNotification) self.closeNotification()
        })
 
        $buttonsContainer.appendChild($buttonElement)
      })
 
      return $buttonsContainer
    },
    closeNotification: function () {
      var self = this
      if ( !this.elementWasRemoved ) {
        self.$body.style.opacity = '0'
        setTimeout(function () {
          self.$body.style.marginTop = '0px'
          self.$body.style.marginBottom = '0px'
          self.$body.style.padding = '0px'
          self.$notification.style.height = 0 + 'px'
          self.$notification.style.padding = 0 + 'px'
          setTimeout(function () {
            self.$notification
              .parentNode
              .removeChild(
                self.$notification
              )
          }, 600);
          if ($narjContainer.scrollTop < 20) {
            $newNotificationsAdvice.classList.remove('active')
          }
        }, 150)
      }
      this.elementWasRemoved = true
    },
    chooseIcon: {
      log: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#EEEEEE"/><path d="M26.595 37.5C26.3313 37.9546 25.9528 38.332 25.4973 38.5943C25.0419 38.8566 24.5256 38.9947 24 38.9947C23.4744 38.9947 22.9581 38.8566 22.5027 38.5943C22.0472 38.332 21.6687 37.9546 21.405 37.5M39 31.5H9C10.1935 31.5 11.3381 31.0259 12.182 30.182C13.0259 29.3381 13.5 28.1935 13.5 27V19.5C13.5 16.7152 14.6062 14.0445 16.5754 12.0754C18.5445 10.1062 21.2152 9 24 9C26.7848 9 29.4555 10.1062 31.4246 12.0754C33.3938 14.0445 34.5 16.7152 34.5 19.5V27C34.5 28.1935 34.9741 29.3381 35.818 30.182C36.6619 31.0259 37.8065 31.5 39 31.5V31.5Z" stroke="black" stroke-opacity="0.73" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
 
      success: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#6ED69A" fill-opacity="0.62"/><path d="M36 16.5L19.5 33L12 25.5" stroke="#11B674" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
 
      warn: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#F5CE69"/><path d="M24 16.5C24.8285 16.5 25.5 17.1716 25.5 18V24C25.5 24.8284 24.8285 25.5 24 25.5C23.1715 25.5 22.5 24.8284 22.5 24V18C22.5 17.1716 23.1715 16.5 24 16.5Z" fill="#DCA14E"/><path d="M25.5 28.5C25.5 27.6716 24.8285 27 24 27C23.1715 27 22.5 27.6716 22.5 28.5V30C22.5 30.8284 23.1715 31.5 24 31.5C24.8285 31.5 25.5 30.8284 25.5 30V28.5Z" fill="#DCA14E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 24C7.5 14.8873 14.8873 7.5 24 7.5C33.1127 7.5 40.5 14.8873 40.5 24C40.5 33.1127 33.1127 40.5 24 40.5C14.8873 40.5 7.5 33.1127 7.5 24ZM24 10.5C16.5441 10.5 10.5 16.5442 10.5 24C10.5 31.4558 16.5441 37.5 24 37.5C31.4559 37.5 37.5 31.4558 37.5 24C37.5 16.5442 31.4559 10.5 24 10.5Z" fill="#DCA14E"/></svg>',
 
      error: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#ED8476"/><path d="M34.0607 16.0607C34.6465 15.4749 34.6465 14.5251 34.0607 13.9393C33.4749 13.3536 32.5251 13.3536 31.9394 13.9393L24 21.8787L16.0607 13.9393C15.4749 13.3536 14.5251 13.3536 13.9394 13.9393C13.3535 14.5251 13.3535 15.4749 13.9394 16.0607L21.8787 24L13.9394 31.9393C13.3535 32.5251 13.3535 33.4749 13.9394 34.0607C14.5251 34.6464 15.4749 34.6464 16.0607 34.0607L24 26.1213L31.9394 34.0607C32.5251 34.6464 33.4749 34.6464 34.0607 34.0607C34.6465 33.4749 34.6465 32.5251 34.0607 31.9393L26.1213 24L34.0607 16.0607Z" fill="#C54F4F"/></svg>',
 
      close: '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.70711 1.7071C10.0976 1.31659 10.0976 0.683407 9.70711 0.292889C9.31659 -0.0976295 8.68341 -0.0976295 8.29289 0.292889L5 3.58578L1.70711 0.292889C1.31659 -0.0976295 0.68342 -0.0976295 0.292894 0.292889C-0.0976315 0.683407 -0.0976315 1.31659 0.292894 1.7071L3.58579 5L0.292894 8.29289C-0.0976315 8.68341 -0.0976315 9.31659 0.292894 9.7071C0.68342 10.0976 1.31659 10.0976 1.70711 9.7071L5 6.41421L8.29289 9.7071C8.68341 10.0976 9.31659 10.0976 9.70711 9.7071C10.0976 9.31659 10.0976 8.68341 9.70711 8.29289L6.41422 5L9.70711 1.7071Z" fill="black" fill-opacity="0.37"/></svg>',
 
      newNotification: '<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d)"><circle cx="20.5" cy="16.5" r="16.5" fill="#C08AE1"/></g><path d="M13 21L21 13L29 21" stroke="black" stroke-opacity="0.6" stroke-width="3"/><defs><filter id="filter0_d" x="0" y="0" width="41" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg>'
    }
  }
})