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

相关文章推荐

傲视众生的熊猫 · 【php增删改查实例】第十二节 - ...· 2 年前 ·

风度翩翩的凳子 · java http chunked ...· 2 年前 ·

行走的长颈鹿 · Task<tresult> 類別 ...· 2 年前 ·

另类的蚂蚁 · blockchain - Python ...· 2 年前 ·

插件使用文档和下载地址： 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" >

< 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 >

<!-- 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!',

效果图如下

'<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

效果图如下

<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');