1.下载
官方地址及插件下载
2.引入
<link href="/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet"><link href="/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"><link href="/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet"><link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css"><script src="/jquery/3.4.1/jquery.min.js"></script><script src="/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，redbuttons: {//按钮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="/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet"><link href="/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"><link href="/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet"><link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css"><script src="/jquery/3.4.1/jquery.min.js"></script><script src="/jquery-confirm/3.3.4/jquery-confirm.min.js"></script></head><body><button id="alert">提示框</button><a class="twitter" data-title="Goto csdn?" href="/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，redbuttons: {//按钮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.示例下载
/download/qq_42324086/11592733
