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

avatar 2017年12月01日12:20:13 5 4993 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
插件使用文档和下载地址：http://craftpip.github.io/jquery-confirm/

引入文件


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

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

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

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

下载地址：点此 jquery-confirm


代码如下

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  9.     <meta name="description" content="">
  10.     <meta name="author" content="">
  11.     <link rel="icon" href="/plugins/bootstrap-3.3.7/favicon.ico">
  13.     <title>BootStrap 和 jQuery 结合美化弹出框</title>
  15.     <!-- Bootstrap core CSS -->
  16.     <link href="/plugins/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">  
  18.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  19.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  20.     <!--[if lt IE 9]>
  21.     <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  22.     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  23.     <![endif]-->
  24. </head>
  25. <body>
  28.     <!-- Bootstrap core JavaScript
  29.     ================================================== -->
  30.     <!-- Placed at the end of the document so the pages load faster -->
  31.     <script src="/static/js/jquery.min.js"></script>  
  32.     <script src="/plugins/bootstrap-3.3.7/js/bootstrap.js"></script>  
  33.     <script src="/static/js/jquery-confirm.min.js"></script>  
  34.     <link rel="stylesheet" href="/static/css/jquery-confirm.min.css"> 
  36.     <script>
  37.         $.alert({
  38.             title: 'Alert!',
  39.             content: 'Simple alert!',
  40.         });
  41.     </script>
  43. </body>
  44. </html>

主要是 第16行 和 31-32行引入。
  1. $.alert({
  2.     title: 'Alert!',
  3.     content: 'Simple alert!',
  4. });

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


基本用法


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

1、alert 确认框
  1. $.alert({
  2.     title: 'Alert!',
  3.     content: 'Simple alert!',
  4. });

效果图如下







2、confirm 询问框
  1. $.confirm({
  2.     title: 'Confirm!',
  3.     content: 'Simple confirm!',
  4.     buttons: {
  5.         confirm: function () {
  6.             $.alert('Confirmed!');
  7.         },
  8.         cancel: function () {
  9.             $.alert('Canceled!');
  10.         },
  11.         else: {
  12.             text: 'else',
  13.             btnClass: 'btn-blue',
  14.             keys: ['enter', 'shift'],
  15.             action: function(){
  16.                 $.alert('Something else?');
  17.             }
  18.         }
  19.     }
  20. });

效果图如下





3、prompt 输入框
  1. $.confirm({
  2.     title: 'Prompt!',
  3.     content: '' +
  4.     '<form action="" class="formName">' +
  5.     '<div class="form-group">' +
  6.     '<label>Enter something here</label>' +
  7.     '<input type="text" placeholder="Your name" class="name form-control" required />' +
  8.     '</div>' +
  9.     '</form>',
  10.     buttons: {
  11.         formSubmit: {
  12.             text: 'Submit',
  13.             btnClass: 'btn-blue',
  14.             action: function () {
  15.                 var name = this.$content.find('.name').val();
  16.                 if(!name){
  17.                     $.alert('provide a valid name');
  18.                     return false;
  19.                 }
  20.                 $.alert('Your name is ' + name);
  21.             }
  22.         },
  23.         cancel: function () {
  24.             //close
  25.         },
  26.     },
  27.     onContentReady: function () {
  28.         // bind to events
  29.         var jc = this;
  30.         this.$content.find('form').on('submit', function (e) {
  31.             // if the user submits the form by pressing enter in the field.
  32.             e.preventDefault();
  33.             jc.$$formSubmit.trigger('click'); // reference the button and click it
  34.         });
  35.     }
  36. });

效果图如下





4、dialog 对话框
  1. $.dialog({
  2.     title: 'Text content!',
  3.     content: 'Simple modal!',
  4. });

效果图如下







5、确认是否跳转

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

Javascript
  1. $('a.baidu').confirm({
  2.     content: "是否跳转到百度",
  3. });
  4. $('a.baidu').confirm({
  5.     buttons: {
  6.         hey: function(){
  7.             location.href = this.$target.attr('href');
  8.         }
  9.     }
  10. });



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

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





简短的用法
  1. $.alert('Content here', 'Title here');
  2. $.confirm('A message', 'Title is optional');
  3. $.dialog('Just to let you know');



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

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



历史上的今天
十二月
01日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0