js coco-modal弹出框插件
无意中在网上发现了一个比较好的javascript弹框插件,非常简单且实用,特此整理分享给大家,以下是一些基本使用方式。
coco-modal
coco-modal是一个简单实用的javascript弹框插件, 兼容主流浏览器,兼容至ie9 (ie9没有动画效果)
用法
通过npm安装:
npm install coco-modal -S import coco from 'coco-modal' coco('hello world') <script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script>
基本用法
<style> body{ margin:0 } .root { width: 1000px; height: 2000px; background-color: #f1f1f2; margin: 0 auto; } </style> <div class="root"></div> <script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script> <script> window.CocoConfig = { buttonColor: '#e71e63' } let root = document.body.querySelector(".root"); let count = 0; root.addEventListener("click", () => { let n = count++ % 3; n === 0 && coco("hello world"); n === 1 && coco.alert("alert"); n === 2 && coco.confirm("confirm"); }); </script>
显示一个输入框
<style> body{ margin:0 } .root { width: 1000px; height: 2000px; background-color: #f1f1f2; margin: 0 auto; } </style> <div class="root"></div> <script src="https://unpkg.com/coco-modal/coco-modal.min.js"></script> <script> window.CocoConfig = { buttonColor: '#e71e63' } let root = document.body.querySelector(".root"); root.addEventListener("click", () => { coco({ title: "验证输入", inputAttrs: { placeholder: "your name", }, }).onClose((cc, isOk, done) => { console.log(cc.closeType); if (isOk) { if (cc.inputValue.trim() === "") { cc.setErrorText("输入不能为空!"); } else { cc.setErrorText(""); cc.inputEl.value = ""; done(); } } else { done(); } }); }); </script>
window.CocoConfig 接收的参数作用所有的modal,单个modal的参数会覆盖全局参数
{ el: null, // 一个dom节点或者选择器 el: '#login' maskClose: true, header: true, footer: true, title: '提示', text: '', width: '500px', top: '15vh', inputAttrs: false, escClose: true, okButton: true, cancelButton: true, okText: '确定', cancelText: '取消', closeButton: true, html: '', zIndexOfModal: 1995, zIndexOfMask: 2008, zIndexOfActiveModal: 2020, autoFocusOkButton: true, autoFocusInput: true, fullScreen: false, borderRadius: '6px', blur: false, buttonColor: '#4285ff', onMount() {}, hooks: { open() {}, opened() {}, close() {}, closed() {} }, destroy: false, animation: true }
找的更少,做的更多!码云笔记只为您提供最好的!
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » js coco-modal弹出框插件
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » js coco-modal弹出框插件