jQuery+bootstrap實現美化警告/確認/提示對話方塊外掛

言曌發表於2018-03-17
jQueryboot

外掛使用文件和下載地址：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. });

效果圖如下

jQuery+bootstrap實現美化警告/確認/提示對話方塊外掛

 

 

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. });

效果圖如下

jQuery+bootstrap實現美化警告/確認/提示對話方塊外掛

 

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. });

效果圖如下

jQuery+bootstrap實現美化警告/確認/提示對話方塊外掛

 

4、dialog 對話方塊

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

效果圖如下

jQuery+bootstrap實現美化警告/確認/提示對話方塊外掛

 

 

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

相關文章