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 }
找的更少,做的更多!码云笔记只为您提供最好的!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » js coco-modal弹出框插件
码云笔记 » js coco-modal弹出框插件