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

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>'
    }
  }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 System.Windows.Forms 命名空间中的 MessageBox.Show() 方法来弹出一个 MessageBox 对话框。示例代码如下:MessageBox.Show("这是一个消息提示框!", "标题", MessageBoxButtons.OK, MessageBoxIcon.Information); ### 回答2: 在WinForm中实现右下角弹出消息提示框的程序可以通过以下步骤进行: 1. 创建WinForm应用程序 首先,我们需要创建一个WinForm应用程序。可以使用Visual Studio等集成开发环境来创建一个新的WinForm项目。 2. 设计主界面 在设计主界面时,我们可以使用一个隐藏的Panel作为消息提示框的容器。这个Panel的初始位置应该设置在窗体右下角,并且默认状态下是不可见的。 3. 弹出提示框 当需要显示提示框时,可以在Panel中添加一个Label控件,用于显示消息内容。设置Label的字体、大小、颜色等样式,使其看起来像一个通知框。 4. 动态显示提示框 在显示提示框时,我们需要将Panel从默认不可见状态切换到可见状态,并适当调整Panel的位置,使其显示在窗体右下角。 可以通过以下代码实现Panel的动态显示: ```csharp panel.Visible = true; panel.BringToFront(); panel.Left = this.Width - panel.Width - 20; // 距离窗体右边缘20个像素 panel.Top = this.Height - panel.Height - 20; // 距离窗体底部20个像素 ``` 5. 设置自动隐藏 为了实现消息提示框的自动隐藏,我们可以使用定时器控件来延时一段时间后隐藏Panel。 在Panel显示后,启动一个定时器,并在定时器的Tick事件中设置Panel的可见性为false。 可以通过以下代码实现定时器的使用: ```csharp Timer timer = new Timer(); timer.Interval = 3000; // 设置延时时间,单位为毫秒 timer.Tick += (sender, args) => { panel.Visible = false; timer.Stop(); }; timer.Start(); ``` 通过以上步骤,我们就可以在WinForm中实现一个右下角弹出消息提示框的程序了。当需要显示消息时,只需向Panel中添加消息内容,并进行显示和定时隐藏即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值