JavaScript 和 CSS3 的全屏弹出层 - popup_view
栏目分类:模态 / 弹出窗口   发布日期:2021-09-18   浏览次数:

popup_view 是一个纯 JavaScript 库,用于创建全屏弹出层,该层使用 CSS3 过渡和转换来实现微妙的打开/关闭动画。

使用:

加载popup.css基本弹出样式和动画规则的CSS 文件。

<link href="css/popup_view.css" rel="stylesheet">

创建一个触发按钮来启动弹出窗口。可选的。

<button id="trigger-button">点击我</button>

将您的自定义内容添加到弹出窗口。

<div id="popup_wrapper" class="popup popup_hide">
  <section class="popup_container">
    <div class="popup_header"></div>
    <div class="popup_content"></div>
    <div class="popup_footer"></div>
  </section>
  <div class="popup_close"></div>
</div>

创建一个新的弹出实例。

var popupView = new popup({
    dom: document.querySelector('#popup_wrapper')
});

单击触发按钮时显示弹出窗口。

document.querySelector('#trigger-button').addEventListener('click', function () {
  popupView.show();
});

使用popup_full该类创建一个全屏弹出窗口。

<div id="popup_wrapper" class="popup_full popup_hide">
  <section class="popup_container">
    <div class="popup_header"></div>
    <div class="popup_content"></div>
    <div class="popup_footer"></div>
  </section>
  <div class="popup_close"></div>
</div>

配置弹出窗口的大小。

var popupView = new popup({ 
    dom: document.querySelector('#popup_wrapper'),
    width: '300px',
    height: '300px',
    minWidth: '300px',
    minHeight: '300px'
});

弹窗关闭后执行回调函数。

var popupView = new popup({ 
    dom: document.querySelector('#popup_wrapper'),
    dosomethingClose: function(dom) {
      console.log('show popup dom', dom)
    }
});

手动隐藏弹出窗口。

popupView.hide(dom, hideCallback);



官方网站:https://github.com/tedshd/popup_view

相关热词: popup_view弹出层

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库