对话框/Tips
Material Design风格纯js确认框对话框插件
PetitQ
material-modal 是一款 Material Design 风格纯 js 确认框和对话框插件。该插件通过简单的 CSS 和 JavaScript 代码来构建确认框和对话框，是替代浏览器原生确认框和对话框的不错选择。
使用方法:
在页面中引入 material-modal.css 和 material-modal.js 文件。
也想出现在这里？联系我们吧
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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
