jQuery+bootstrap实现美化警告/确认/提示对话框插件

插件使用文档和下载地址：http://craftpip.github.io/jquery-confirm/

引入文件

因为我们是在 BootStrap + jQuery 上实现的，首先需要

1、先引入 jQuery 库，然后是Bootstrap 需要的两个核心文件(css 和 js)

2、然后在后面引入两个核心文件

jquery-confirm.min.js 和 jquery-confirm.min.js

下载地址：点此 jquery-confirm

代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/plugins/bootstrap-3.3.7/favicon.ico">
<title>BootStrap 和 jQuery 结合美化弹出框</title>
<link href="/plugins/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="/static/js/jquery.min.js"></script>
<script src="/plugins/bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="/static/js/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="/static/css/jquery-confirm.min.css">
<script>
$.alert({
title: 'Alert!',
content: 'Simple alert!',
});
</script>
</body>
</html>

主要是第16行和 31-32行引入。

$.alert({
title: 'Alert!',
content: 'Simple alert!',
});

是调用语法。下面会介绍。

基本用法

引入上面的文件后，我们只需要在引入的后面进行使用了。

1、alert 确认框

$.alert({
title: 'Alert!',
content: 'Simple alert!',
});

效果图如下

2、confirm 询问框

$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
else: {
text: 'else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});

效果图如下

3、prompt 输入框

$.confirm({
title: 'Prompt!',
content: '' +
'<form action="" class="formName">' +
'<div class="form-group">' +
'<label>Enter something here</label>' +
'<input type="text" placeholder="Your name" class="name form-control" required />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Submit',
btnClass: 'btn-blue',
action: function () {
var name = this.$content.find('.name').val();
if(!name){
$.alert('provide a valid name');
return false;
}
$.alert('Your name is ' + name);
}
},
cancel: function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
// if the user submits the form by pressing enter in the field.
e.preventDefault();
jc.$$formSubmit.trigger('click'); // reference the button and click it
});
}
});

效果图如下

4、dialog 对话框

$.dialog({
title: 'Text content!',
content: 'Simple modal!',
});

效果图如下

5、确认是否跳转

HTML

<a class="baidu" data-title="Goto baidu?" href="http://www.baidu.com">Goto baidu</a>

Javascript

$('a.baidu').confirm({
content: "是否跳转到百度",
});
$('a.baidu').confirm({
buttons: {
hey: function(){
location.href = this.$target.attr('href');
}
}
});

这里就介绍这几个常用的吧，更多的请点此

效果图是点击链接后，出来一个询问框，点击确认会跳转到百度

简短的用法

$.alert('Content here', 'Title here');
$.confirm('A message', 'Title is optional');
$.dialog('Just to let you know');

这里就介绍这么多了，更多内容，请直接访问 http://craftpip.github.io/jquery-confirm/

本文地址：https://liuyanzhao.com/6846.html