CocoModal，一个简单实用的js弹窗插件
时间：2023-03-31 11:44:20
CSS
简介coco-modal是一款简单实用的javascript弹框插件，兼容主流浏览器，最高兼容ie9（ie9没有动画效果）在线示例：ExamplesUsageinstallvianpm:npminstallcoco-modalimportcocofrom'coco-modal'coco('helloworld')实现一个简单的登录模态框首先创建登录面板内容，使用“display:none”将隐藏面板login
letbtn=document.body.querySelector("#button");让username=document.body.querySelector("#username");让密码=文档ent.body.querySelector("#password");btn.addEventListener("click",()=>{coco({title:"Login",el:"#login",okText:"Submit",maskClose:false,}).onClose((cc,ok,done)=>{if(ok){if(username.value.trim()!==""&&username.value.trim()!==""){done();}else{cc.setErrorText("输入不能为空！”);}}else{done();}});});效果图的所有配置参数以下都是coco-modal可配置参数{el:null,maskClose:true,header:true,footer:true,title:'Prompt',text:'',width:'500px',top:'15vh',inputAttrs:false,escClose:true,okButton:true,cancelButton:true,okText:'OK',cancelText:'Cancel',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}
