Nice Popup

打开一个 Alert 弹出层

打开一个带有状态的 Alert 弹出层

打开一个自定义状态的 Alert 弹出层

nicePopup.alert.open('打开了一个自定义状态 Alert 弹出层', 'favor')

.alert-content.favor .type-icon::after {content: '♥'; color: pink}
.alert-content.favor {color: pink}

打开一个 Confirm 弹出层，成功时计数加 1

nicePopup.confirm.open('是否计数加 1 ？', function (popup) {
  popup.close()
  count()
})
function count () {
  if (!this.countNum) {this.countNum = 0}
  this.countNum++
  document.getElementById('count').innerHTML = '计数：' + this.countNum
}

打开一个 Dialog 弹出层

<div class="dialog1 nice-popup">
  我是一个 dialog 弹出层内容。
  <br />
  我的默认打开方式是：
  <br />
  <span class="highlight">模态、popin 动画效果、展示关闭按钮、非自动关闭<span>
</div>

nicePopup.dialog.open('.dialog1')

打开一个非模态的 Dialog 弹出层

<div class="dialog2 nice-popup">
  我是一个非模态 dialog 弹出层内容。
  <br />
  我的打开方式是：
  <br />
  <span class="highlight">非模态、popin 动画效果、展示关闭按钮、非自动关闭<span>
</div>

nicePopup.dialog.open('.dialog2')

用不同的配置打开同一个 Dialog 弹出层

<div class="dialog3 nice-popup">
  我是那个被折腾的 dialog 弹出层内容。
  <br />
  我目前的打开方式是：
  <br />
  <span class="highlight"><span>
</div>

document.querySelector('.dialog3 .highlight').innerHTML = '模态、popin 动画效果、展示关闭按钮、非自动关闭'
nicePopup.dialog.open('.dialog3')

//config 
document.querySelector('.dialog3 .highlight').innerHTML = '非模态、无动画效果、隐藏关闭按钮、3 秒后自动关闭'
nicePopup.dialog.open('.dialog3', {modal: false, closeable: false, effect: '', autoClose: 3000})

多层级弹出层

nicePopup.dialog.open('.dialog4')
        
//去支付按钮事件
nicePopup.alert.open('您的举动已经被您家贤内助发现，<br />现正三倍速向您移动中...')

//取消按钮事件
nicePopup.close()

弹出层动画效果

带有输入框的 Dialog 弹出层