JavaScript创建自定义浏览器弹出窗口 – popup_window.js
栏目分类:模态 / 弹出窗口   发布日期:2021-10-03   浏览次数:

popup_window.js 是一个 JavaScript 库,用于以编程方式创建、打开和关闭浏览器弹出窗口。

使用:

1. 下载并导入 popup_window.js JavaScript 库。

<script src="popup_window.js"></script>

2. 创建一个新实例并指定要在弹出窗口中显示的网页的路径。

const win = new PopupWindow({
      url: '/path/to/url/'
});

3. 打开一个新的弹出窗口。

win.open();

4. 关闭弹出窗口。

win.close();

5. 静默关闭弹出窗口。

win.closeSilently();

6. 它还支持基于表单的弹出窗口。

<form name="form_demo" method="GET">
  <ul>
    <li>
      <section>
        <label for="text-data1">数据1</label>
        <input id="text-data1" type="text" name="data1" value="defaultValue1">
      </section>
    </li>
    <li>
      <section>
        <label for="text-data2">数据2</label>
        <input id="text-data2" type="text" name="data2" value="defaultValue2">
      </section>
    </li>
  </ul>
</form>
const win = new PopupWindow({
 
      // 表单
      form: document.form_demo,
 
      // 表单的action 属性
      url: url, 
 
      // 打开的窗口
      name: 'demo', 
       
});

7. 自定义弹出窗口的可用选项。

const popupClosedEventWatchingInterval = 500; // ms
const moduleName = 'PopupWindow';
const defaultUrl = 'about:blank';
const features = {
  width: 500, // px
  height: 500, // px
  toolbar: false, // no
  menubar: false, // no
  scrollbars: true, // yes
  resizable: false, // no
  location: false, // no
  directories: false, // no
  status: false, // no
};

8. 回调函数。

const win = new PopupWindow({
      url: '/path/to/url/',
      onBeforeOpen: function() {
        // 做某事
      },
      onAfterOpen: function() {
        // 做某事
      },
      onAfterClose: function() {
        // 做某事
      },
});

官方网站:https://github.com/niceman114/popup-window

相关热词: 弹出窗口popup_window

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