js模态弹出层弹出框插件coco-modal示例展示代码
代码语言:html
所属分类:弹出层
代码描述:js模态弹出层弹出框插件coco-modal示例展示代码
代码标签: 层 弹出 框 插件 coco-modal 示例 展示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { margin: 0; } *{ box-sizing:border-box; outline: none } .root { width: 1000px; height: 200vh; /* background-color: #f1f1f2; */ margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .content{ box-shadow: 0 0 0 2px rgba(66, 133, 255,.25); background-color: rgba(66, 133, 255,.036); padding: 30px; border-radius:6px } .btn { font-size: 14px; text-decoration: none; padding: 6px 22px; white-space: nowrap; border-radius: 6px; font-weight: 600; display: inline-block; cursor: pointer; position: relative; border: 0; appearance: none; outline: none; margin: 30px; position: relative; } .btn span { position: relative; } .btn { background-color: #ec558f; background-color: #e71e63; background-color: #4285ff; color: #fff; } .btn::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; transition: all 0.16s ease-out; background-color: rgba(0, 0, 0, 0); } .btn:hover::before { background-color: rgba(0, 0, 0, 0.08); } .btn:active::before { transition: all 0.05s ease; background-color: rgba(0, 0, 0, 0.16); } .swiper-container { width: 100%; height: 700px; } .swiper-slide { text-align: center; font-size: 18px; background: #e9e9e9; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { width: 100%; } .long { background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); } .full { background-color: #FBDA61; background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%); } .input { margin: 14px 0; width: 100%; height: 39px; border-radius: 6px; padding: 7px 15px; font-weight: 400; appearance: none; color: #333; background-color: #f3f3f4; outline: none; border: 1px solid transparent; font-size: 14px; box-shadow: 0 0 0 0 rgba(53, 120, 229, .1); transition: all .16s ease-out; line-height: 20px; } .input::placeholder { line-height: 24px; color: #a2a2a3 } .input:hover { transition: all .1s ease-out; background-color: #fff; box-shadow: 0 0 0 0px rgba(111, 111, 111, 0.2); box-shadow: 0 0 0 1px rgba(66, 133, 255, .25); border-color: rgba(66, 133, 255, 0.5); } .input:focus { background-color: #fff; box-shadow: 0 0 0 1px rgba(66, 133, 255, .25); border-color: rgba(66, 133, 255, 0.5); } .input:active { transition: all .08s ease-out; background-color: #fff; border-color: #cbcbcc; box-shadow: 0 0 0 0 rgba(66, 133, 255, 0.125); } .tip{ padding: 10px 0; display:inline-block; color: #000; font-size: 16px; font-weight:600 } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.5.3.8.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.5.3.8.js"></script> </head> <body> <div class="root"> <div class="content"></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/coco-modal.min.js"></script> <script > let handlers = {}; let root = document.body.querySelector(".root"); let content = document.body.querySelector(".content"); const addEvent = (el, name, fn) => { el.addEventListener(name, fn); }; const clickHandler = (btn) => { let type = btn.getAttribute("data-type"); let fn = handlers[type]; fn && fn(); }; const example = (type, fn) => { handlers[type] = fn; }; const addSpan = (btn)=>{ let span = document.createElement('span'); span.innerText = btn.innerText btn.innerText = '' btn.appendChild(span) } addEvent(document, "DOMContentLoaded", (_) => { let arr = document.body.querySelectorAll(".btn"); Array.from(arr).forEach((btn) => { addSpan(btn) addEvent(btn, "click", (_) => { clickHandler(btn); }); content.appendChild(btn); }); }); </script> <!-- 初始化 --> <script> coco.init(); </script> <!-- 基础 --> <div class="btn" data-type="base">基础</div> <script> example("base", () => { coco("欢迎使用Coco Modal!"); }); </script> <!-- alert --> <div class="btn" data-type="alert">alert</div> <script> example("alert", () => { coco.alert("alert"); }); </script> <!-- alert --> <div class="btn" data-type="confirm">confirm</div> <script> example("confirm", () => { coco.confirm("confirm"); }); </script> <!-- 所有参数初始值 --> <div class="btn" data-type="args">所有参数初始值</div> <script> example("args", () => { coco({ text: ` let initOptions = { 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', hooks: { open() {}, opened() {}, close() {}, closed() {}, }, destroy: false, animation: false } `, top: "center", cancelButton: false, okText: "关闭", title: "所有参数初始值", maskClose: false, closeButton: false, buttonColor: "#ffba00", }); }); </script> <!-- 输入框 --> <div class="btn" data-type="input">输入框</div> <script> example("input", () => { 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.inputValue); cc.inputEl.value = ""; } } else { done(); } }); }); </script> <!-- onMount (onMount只触发一次 hooks.open 每次打开都会触发) --> <div class="btn" data-type="onMount">onMount</div> <script> example("onMount", () => { coco({ footer: false, top: "center", title: "图片预览", html: ` <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"> </div> <div class="swiper-slide"> <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"> </div> <div class="swiper-slide"> <img src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png"> </div> <div class="swiper-slide"> <img src="https://www.jq22.com/img/cs/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0