当前位置:JS特效 » 其他 » Material Design风格纯js确认框和对话框插件
 Material Design风格纯js确认框和对话框插件
如果您觉得内容不错,请分享:

插件介绍

material-modal是一款MaterialDesign风格纯js确认框和对话框插件。该插件通过简单的CSS和JavaScript代码来构建确认框和对话框,是替代浏览器原生确认框和对话框的不错选择。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:96
简要教程

material-modal是一款Material Design风格纯js确认框和对话框插件。该插件通过简单的CSS和JavaScript代码来构建确认框和对话框,是替代浏览器原生确认框和对话框的不错选择。

使用方法

在页面中引入material-modal.css和material-modal.js文件。

 
                  
                
HTML结构

模态确认框和对话框的HTML结构如下:

这里是标题
这里是内容
确定
取消
初始化插件

可以通过超链接或按钮来打开一个对话框。

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

Top