jquery-confirm 消息弹出框插件的使用
裘光启
1.下载
2.引入
<link href="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>3.使用
-
你可以通过js事件去触发
简单文本的消息提示框：
$.alert('你点击了确认!');
- 自定义样式使用
$('#alert').click(function () {
$.alert({
title: '提示',//标题
content: '你好啊',//提示的内容
icon: 'fa fa-comment',//标题前的图标样式和font-awesome一起使用
autoClose: 'cancel|5000', /*自动关闭 属性值为： 执行事件|延迟执行时间*/
type: 'dark',//对话框类型 orange，dark，green，red
buttons: {//按钮
confirm: {
text: '确认',//按钮的文本内容
btnClass: 'btn-primary',//按钮的class样式
action: function () {//单击按钮后的执行函数
//$.alert 添加一个按钮（好吧）如果没有指定按钮，这可以让用户关闭模态。
// $.alert('你点击了确认!');
//$.confirm 如果没有指定按钮，将添加两个按钮（Okay＆cancel）。
//$.confirm('你点击了确认!');
//$.dialog 删除按钮并显式显示closeIcon（×）
$.dialog({
title: 'Text content!',
content: 'Simple modal!',
});
/* $.fn.confirm 这可以直接绑定到元素
如果没有定义按钮，将添加默认按钮（okay和cancel），
okay的默认操作将是重定向给定的href。使用 此。$ target 来获取被点击的元素。 */
}
},
cancel: {
text: '取消',
action: function () {
$.alert('你点击了取消!');
}
}
}
});
});4.示例（可以直接执行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
</head>
<body>
<button id="alert">提示框</button>
<a class="twitter" data-title="Goto csdn?" href="https://me.csdn.net/qq_42324086">Goto csdn</a>
<script>
/* $.fn.confirm 这可以直接绑定到元素
如果没有定义按钮，将添加默认按钮（okay和cancel），
okay的默认操作将是重定向给定的href。使用 此。$ target 来获取被点击的元素。 */
$('a.twitter').confirm({
content: "...",
});
$('a.twitter').confirm({
buttons: {
hey: function () {
location.href = this.$target.attr('href');
}
}
});
$('#alert').click(function () {
$.alert({
title: '提示',//标题
content: '你好啊',//提示的内容
icon: 'fa fa-comment',//标题前的图标样式和font-awesome一起使用
autoClose: 'cancel|5000', /*自动关闭 属性值为： 执行事件|延迟执行时间*/
type: 'dark',//对话框类型 orange，dark，green，red
buttons: {//按钮
confirm: {
text: '确认',//按钮的文本内容
btnClass: 'btn-primary',//按钮的class样式
action: function () {//单击按钮后的执行函数
//$.alert 添加一个按钮（好吧）如果没有指定按钮，这可以让用户关闭模态。
// $.alert('你点击了确认!');
//$.confirm 如果没有指定按钮，将添加两个按钮（Okay＆cancel）。
//$.confirm('你点击了确认!');
//$.dialog 删除按钮并显式显示closeIcon（×）
$.dialog({
title: 'Text content!',
content: 'Simple modal!',
});
/* $.fn.confirm 这可以直接绑定到元素
如果没有定义按钮，将添加默认按钮（okay和cancel），
okay的默认操作将是重定向给定的href。使用 此。$ target 来获取被点击的元素。 */
}
},
cancel: {
text: '取消',
action: function () {
$.alert('你点击了取消!');
}
}
}
});
});
</script>
</body>
</html>5.示例下载
类似资料：