BootBox使用

時間 2019-12-10

標籤 bootbox 使用简体版

原文原文鏈接

最近公司的系統前端頁面全面優化，代號UI/UX。我在優化過程當中常常須要使用確認框，可是確認框使用window的話，太難看。因而想作一個很是美觀的確認框。css

因爲系統引用了bootstrap，首先想到的是查看bootstrap中有沒有好看的確認框，可是很遺憾，沒有。可是在google的過程當中發現了就是本次文章要介紹的：Bootbox.html

這款js集與bootstrap完美兼容，很是適合。該js主要是集成了各類彈出框，提供了很是漂亮的外觀。前端

這裏我只說確認框，其餘框你們能夠去官網查詢便可，官網：http://bootboxjs.com/jquery

若是直接按照官網的引用，效果是這樣的：web

爲了符合本身公司新系統的設計樣式，又對這個確認框進行優化，最終以下：bootstrap

對於確認框的外觀樣式等，js也提供了比較靈活的配置，固然樣式本身也能夠重寫。windows

意義就在於，再也不是windows自帶的枯燥的比較ugly的confirm框。app

該js運行須要基於bootstrap，所以須要引用bootstrap所需的js、css等，最後再引用bootbox.js.ide

下面是純淨HTML代碼,歡迎你們拷貝學習交流。學習

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>Document</title>
  9 
 10     <!-- 新 Bootstrap 核心 CSS 文件 -->
 11     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 12     <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 13     <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 14     <script src="bootbox.min.js"></script>
 15     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 16 
 17     <style>
 18         .modal-content {
 19             position: relative;
 20             background-color: #fff;
 21             -webkit-background-clip: padding-box;
 22             background-clip: padding-box;
 23             border: 1px solid #999;
 24             border: 1px solid rgba(0, 0, 0, .2);
 25             border-radius: 0px;
 26             outline: 0;
 27             -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
 28             box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
 29             top: 150px;
 30         }
 31         
 32         .modal-header {
 33             padding: 7px;
 34             border-bottom: 1px solid #e5e5e5;
 35             background-color: #F44336;
 36         }
 37         
 38         button.close {
 39             -webkit-appearance: none;
 40             padding: 0;
 41             cursor: pointer;
 42             background-color: white;
 43             border: 1px solid #F44336;
 44             z-index: 1;
 45             position: relative;
 46             width: 18px;
 47             height: 18px;
 48             border-radius: 9px;
 49         }
 50         
 51         .close {
 52             float: right;
 53             font-size: 17px;
 54             font-weight: 700;
 55             line-height: 1;
 56             color: #F44336;
 57             text-shadow: 0 1px 0 #fff;
 58             filter: alpha(opacity=20);
 59             opacity: 1;
 60         }
 61         
 62         .modal-body {
 63             position: relative;
 64             padding: 15px;
 65             font-family: Roboto;
 66         }
 67         
 68         .modal-footer {
 69             padding: 15px;
 70             text-align: center;
 71             border-top: 1px solid #e5e5e5;
 72         }
 73         
 74         .btn-default {
 75             color: #FFFFFF;
 76             background-color: #333;
 77             border-color: #ccc;
 78         }
 79         
 80         .btn-default:hover {
 81             color: #FFFFFF;
 82             background-color: #333;
 83             border-color: #ccc;
 84         }
 85         
 86         .btn-primary {
 87             color: #fff;
 88             background-color: #F44336;
 89             border-color: #F44336;
 90         }
 91         
 92         button.btn.btn-primary:hover {
 93             background-color: #F44336;
 94             border-color: #F44336;
 95         }
 96         
 97         .modal-title {
 98             margin: 0;
 99             line-height: 1.42857143;
100             font-size: 16px;
101             font-weight: bold;
102             color: #FFFFFF;
103             font-family: Montserrat;
104         }
105     </style>
106 </head>
107 
108 <body>
109 
110     <input type="button" value="ceshi" class="btn btn-default">
111 
112 
113 
114     <script>
115         bootbox.confirm({
116             title: "Confirm",
117             message: "Do you want to activate the Deathstar now? This cannot be undone.",
118             buttons: {
119                 confirm: {
120                     label: '<i class="fa fa-check"></i> Yes',
121                     className: 'btn-success'
122                 },
123                 cancel: {
124                     label: '<i class="fa fa-times"></i> No',
125                     className: 'btn-danger'
126                 }
127             },
128             callback: function(result) {
129                 if (result) {
130                     backmethod("馮偉大神");
131                 } else {
132                     return;
133                 }
134             }
135         });
136 
137         function backmethod(name) {
138             alert("你成功互換了我：" + name);
139         }
140     </script>
141 
142 </body>
143 
144 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。