ModalLayer模态框插件js弹出框_js模态框插件资源-CSDN下载

共3个文件

html：1个

css：1个

js：1个

模态框插件

js弹出框

198 浏览量 2020-06-11 09:24:15 上传评论收藏 11KB ZIP 举报

**ModalLayer模态框插件js弹出框详解** 在网页设计和开发中，模态框（Modal Layer）是一种常用的设计元素，它用于在当前页面上弹出一个半透明的覆盖层，显示额外的信息或者进行交互操作，而不会中断用户与主页面的联系。ModalLayer是一款强大的JavaScript插件，它提供了多种类型的模态框，如倒计时、确认对话框以及弹窗内嵌iframe等，极大地丰富了网页的交互体验。 1. **基本概念** - **模态框（Modal）**: 模态框是一种阻止用户与页面其余部分交互的对话框，直到用户与该对话框互动或关闭为止。 - **非模态框（Non-Modal）**: 非模态框允许用户在对话框打开的同时继续与页面其他部分互动。 - **js弹出框**: 使用JavaScript实现的弹出窗口，可以动态创建和控制。 2. **ModalLayer特点** - **多样化形式**: ModalLayer支持多种类型的模态框，满足不同场景的需求。 - **倒计时**: 可以设定一个时间限制，用户必须在此时间内做出响应，增强了交互紧迫性。 - **确认对话框**: 提供标准的确认操作，避免用户误操作，确保用户明确意图后再执行下一步。 - **弹窗iframe**: 在模态框内嵌入iframe，可以加载外部网页，实现内容的灵活展示。 3. **使用步骤** - **引入资源**: 首先要在HTML文件中引入ModalLayer的相关CSS和JavaScript文件，通常是通过`<link>`和`<script>`标签完成。 - **创建HTML结构**: 为每个模态框创建对应的HTML结构，一般包括一个隐藏的模态框容器和触发按钮。 - **初始化插件**: 在JavaScript中调用ModalLayer的初始化方法，配置相关参数，如动画效果、尺寸、内容等。 - **事件绑定**: 绑定触发模态框显示和关闭的事件，通常是在按钮的点击事件中调用插件的显示和关闭方法。 4. **示例代码** ```html  <link rel="stylesheet" href="path/to/modal-layer.css"> <script src="path/to/modal-layer.js"></script>  <div id="myModal" class="modal"> <div class="modal-content"> ... </div> </div>  <button id="openBtn">打开模态框</button>  <script> var modal = new ModalLayer({ target: '#myModal', content: '这里是模态框内容' }); document.getElementById('openBtn').addEventListener('click', function() { modal.show(); }); </script> ``` 5. **自定义配置** ModalLayer通常提供丰富的配置选项，如宽度、高度、背景颜色、动画效果等，可以根据项目需求进行定制，以达到最佳的用户体验。 6. **与框架集成** 虽然本例中是独立使用的，但ModalLayer也可以与Bootstrap、Vue.js、React等前端框架集成，提供更高级的功能和更好的组件复用。 7. **注意事项** - 考虑到无障碍性（Accessibility），确保模态框在键盘导航时也能正确工作。 - 在移动设备上，需优化触摸事件的处理，确保良好的触控体验。 ModalLayer模态框插件通过js弹出框的方式，为网页开发提供了强大且灵活的对话框解决方案，无论是简单的信息提示还是复杂的交互操作，都能轻松应对。通过合理配置和使用，可以显著提升网页的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

ModalLayer模态框插件js弹出框.zip （3个子文件）

asset

css

modallayer.min.css 9KB

modallayer-ie.min.js 36KB

index.html 5KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ModalLayer模态框插件js弹出框</title>  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css">  <script src="https://cdn.bootcss.com/font-awesome/5.11.2/js/all.min.js"></script>  <link rel="stylesheet" href="./asset/css/modallayer.min.css">  <script src="./asset/js/modallayer-ie.min.js"></script> <style> #test-button-container { position: absolute; top: 50%; left: 0px; right: 0px; width: 145px; margin: 0px auto; text-align: center; transform: translateY(-50%); } #test-button-container button { width: 145px; margin: 5px 0px; padding: 10px 0px; } </style> </head> <body> <div id="test-button-container"> <button id="msg-button" type="button">测试msg</button> <button id="alert-button" type="button">测试alert</button> <button id="confirm-button" type="button">测试confirm</button> <button id="prompt-button" type="button">测试prompt</button> <button id="page-button-1" type="button">测试page</button> <button id="page-button-2" type="button">测试page</button> </div> <script> // 测试msg document.querySelector('#msg-button').onclick = function () { let option = { popupTime: 2, hook: { initStart: function () { // 检查之前老旧实例如果存在则销毁 if (document.querySelector('#modal-layer-container')) ModalLayer.removeAll(); } }, displayProgressBar: true, displayProgressBarPos: 'top', displayProgressBarColor: 'red', content: '<i class="fas fa-check" style="color: deepskyblue"></i>点击遮罩层自动消失!', }; ModalLayer.msg(option); // ModalLayer.msg('测试一下'); } // 测试alert document.querySelector('#alert-button').onclick = function () { let option = { hook: { initStart: function () { // 检查之前老旧实例如果存在则销毁 if (document.querySelector('#modal-layer-container')) ModalLayer.removeAll(); } }, popupTime: 0, type: 'alert', title: '测试', dragOverflow: true, content: '<i class="fas fa-check" style="color: deepskyblue"></i>点击遮罩层自动消失!', }; ModalLayer.alert(option); } // 测试confirm document.querySelector('#confirm-button').onclick = function () { let option = { title: '测试', popupTime: 10, hook: { initStart: function () { // 检查之前老旧实例如果存在则销毁 if (document.querySelector('#modal-layer-container')) ModalLayer.removeAll(); } }, displayProgressBar: true, displayProgressBarPos: 'left', content: '你认为你能成功吗 ?', okText: '那是必须滴！', noText: '怎么可能 ?', callback: { ok: function () { this.hide(); ModalLayer.alert({ content: '<i class="fas fa-check-circle" style="color: green"></i> Good Luck!', parentModalLayer: this }); }, no: function () { ModalLayer.alert({ content: '<i class="fas fa-window-close" style="color: red"></i> More Confidence!!<br>五秒后自动关闭该窗口' }); } } } ModalLayer.confirm(option); } // 测试prompt document.querySelector('#prompt-button').onclick = function () { let option = { title: '测试', popupTime: 0, hook: { initStart: function () { // 检查之前老旧实例如果存在则销毁 if (document.querySelector('#modal-layer-container')) ModalLayer.removeAll(); } }, displayProgressBar: true, displayProgressBarColor: 'red', displayProgressBarPos: 'right', content: '<input type="text" style="width: calc(100% - 2px); height: 24px; font-size: 16px; color: red;" placeholder="输入内容进行测试">', okText: '提交', noText: '取消', callback : { ok: function () { this.hide(); ModalLayer.alert({ parentModalLayer: this, content: '<i class="fas fa-check-circle" style="color: green"></i> 提交成功!<br>你提交的数据为: ' + this.getNodes().container.querySelector('input').value }); }, } }; ModalLayer.prompt(option); } // 测试Page document.querySelector('#page-button-1').onclick = function () { let option = { mask: false, title: '测试测试', popupTime: 0, contentFullContainer: false, pageOption: { src: 'http://sc.chinaz.com', } }; ModalLayer.page(option); } document.querySelector('#page-button-2').onclick = function () { let option = { mask: false, title: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试', popupTime: 0, contentFullContainer: true, pageOption: { scrolling: 'yes', src: 'https://www.hao123.com/', } }; ModalLayer.page(option); } </script> </body> </html>

评论收藏

内容反馈