material-modal是一款Material Design风格纯js确认框和对话框插件。该插件通过简单的CSS和JavaScript代码来构建确认框和对话框,是替代浏览器原生确认框和对话框的不错选择。
使用方法
在页面中引入material-modal.css和material-modal.js文件。
<link rel="stylesheet" href="css/material-modal.css" type="text/css" /> <script src="js/material-modal.js"></script>
HTML结构
模态确认框和对话框的HTML结构如下:
<div id="materialModal" onclick="closeMaterialAlert(event, false)" class="hide"> <div id="materialModalCentered"> <div id="materialModalContent" onclick="event.stopPropagation()"> <div id="materialModalTitle"> 这里是标题 </div> <div id="materialModalText"> 这里是内容<br/> </div> <div id="materialModalButtons"> <div id="materialModalButtonOK" class="materialModalButton" onclick="closeMaterialAlert(event, true)"> 确定 </div> <div id="materialModalButtonCANCEL" class="materialModalButton" onclick="closeMaterialAlert(event, false)"> 取消 </div> </div> </div> </div> </div>
初始化插件
可以通过超链接或按钮来打开一个对话框。
materialAlert('标题', '内容', function(result){ if(result==true) console.log('OK按钮被按下'); else console.log('没有按钮被按下'); });
要打开一个确认框,可以使用以下代码:
materialConfirm('标题', '内容', function(result){ if(result==true) console.log('OK按钮被按下'); else console.log('CANCEL按钮被按下或没有按钮被按下'); });
material-modal插件的github地址为:https://github.com/fechanique/material-modal。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!