Bootstrap：彈出框和提示框效果以及程式碼展示
前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，這章來看看bootstrap裡面彈出框和提示框的處理。總的來說，彈出提示主要分為三種：彈出框、確定取消提示框、資訊提示框。本篇就結合這三種類型分別來介紹下它們的使用。
一、Bootstrap彈出框
使用過JQuery UI的園友們應該知道，它裡面有一個dialog的彈出框元件，功能也很豐富。與jQuery UI的dialog類似，Bootstrap裡面也內建了彈出框元件。開啟bootstrap 文件
1、cshtml介面程式碼
1 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">2 <div class="modal-dialog" role="document"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 6 <h4 class="modal-title" id="myModalLabel">新增</h4> 7 </div> 8 <div class="modal-body"> 9 10 <div class="form-group"> 11 <label for="txt_departmentname">部門名稱</label> 12 <input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部門名稱"> 13 </div> 14 <div class="form-group"> 15 <label for="txt_parentdepartment">上級部門</label> 16 <input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上級部門"> 17 </div> 18 <div class="form-group"> 19 <label for="txt_departmentlevel">部門級別</label> 20 <input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部門級別"> 21 </div> 22 <div class="form-group"> 23 <label for="txt_statu">描述</label> 24 <input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="狀態"> 25 </div> 26 </div> 27 <div class="modal-footer"> 28 <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關閉</button> 29 <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>儲存</button> 30 </div> 31 </div> 32 </div> 33 </div>
最外面的div定義了dialog的隱藏。我們重點來看看第二層的div
1 <div class="modal-dialog" role="document">這個div定義了dialog，對應的class有三種尺寸的彈出框，如下：
1 <div class="modal-dialog" role="document">1 <div class="modal-dialog modal-lg" role="document">1 <div class="modal-dialog modal-full" role="document">第一種表示預設型別的彈出框；第二種表示增大的彈出框；第三種表示滿屏的彈出框。role="document"表示彈出框的物件的當前的document。
2、js裡面將dialog show出來。
預設情況下，我們的彈出框是隱藏的，只有在使用者點選某個操作的時候才會show出來。來看看js裡面是如何處理的吧：
1 //註冊新增按鈕的事件 2 $("#btn_add").click(function () { 3 $("#myModalLabel").text("新增"); 4 $('#myModal').modal(); 5 });
對，你沒有看錯，只需要這一句就能show出這個dialog。
$('#myModal').modal();3、效果展示
新增效果
編輯效果
4、說明
彈出框顯示後，點選介面上其他地方以及按Esc鍵都能隱藏彈出框，這樣使得使用者的操作更加友好。關於dialog裡面關閉和儲存按鈕的事件的初始化在專案裡面一般是封裝過的，這個我們待會來看。
二、確認取消提示框
這種型別的提示框一般用於某些需要使用者確定才能進行的操作，比較常見的如：刪除操作、提交訂單操作等。
1、使用bootstrap彈出框確認取消提示框
介紹這個元件之前，就得說說元件封裝了，我們知道，像彈出框、確認取消提示框、資訊提示框這些東西專案裡面肯定是多處都要呼叫的，所以我們肯定是要封裝元件的。下面就來看看我們封裝的缺乏取消提示框。
1 (function ($) { 2 3 window.Ewin = function () { 4 var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' + 5 '<div class="modal-dialog modal-sm">' + 6 '<div class="modal-content">' + 7 '<div class="modal-header">' + 8 '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' + 9 '<h4 class="modal-title" id="modalLabel">[Title]</h4>' + 10 '</div>' + 11 '<div class="modal-body">' + 12 '<p>[Message]</p>' + 13 '</div>' + 14 '<div class="modal-footer">' + 15 '<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' + 16 '<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' + 17 '</div>' + 18 '</div>' + 19 '</div>' + 20 '</div>'; 21 22 23 var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' + 24 '<div class="modal-dialog">' + 25 '<div class="modal-content">' + 26 '<div class="modal-header">' + 27 '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' + 28 '<h4 class="modal-title" id="modalLabel">[Title]</h4>' + 29 '</div>' + 30 '<div class="modal-body">' + 31 '</div>' + 32 '</div>' + 33 '</div>' + 34 '</div>'; 35 var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); 36 var generateId = function () { 37 var date = new Date(); 38 return 'mdl' + date.valueOf(); 39 } 40 var init = function (options) { 41 options = $.extend({}, { 42 title: "操作提示", 43 message: "提示內容", 44 btnok: "確定", 45 btncl: "取消", 46 width: 200, 47 auto: false 48 }, options || {}); 49 var modalId = generateId(); 50 var content = html.replace(reg, function (node, key) { 51 return { 52 Id: modalId, 53 Title: options.title, 54 Message: options.message, 55 BtnOk: options.btnok, 56 BtnCancel: options.btncl 57 }[key]; 58 }); 59 $('body').append(content); 60 $('#' + modalId).modal({ 61 width: options.width, 62 backdrop: 'static' 63 }); 64 $('#' + modalId).on('hide.bs.modal', function (e) { 65 $('body').find('#' + modalId).remove(); 66 }); 67 return modalId; 68 } 69 70 return { 71 alert: function (options) { 72 if (typeof options == 'string') { 73 options = { 74 message: options 75 }; 76 } 77 var id = init(options); 78 var modal = $('#' + id); 79 modal.find('.ok').removeClass('btn-success').addClass('btn-primary'); 80 modal.find('.cancel').hide(); 81 82 return { 83 id: id, 84 on: function (callback) { 85 if (callback && callback instanceof Function) { 86 modal.find('.ok').click(function () { callback(true); }); 87 } 88 }, 89 hide: function (callback) { 90 if (callback && callback instanceof Function) { 91 modal.on('hide.bs.modal', function (e) { 92 callback(e); 93 }); 94 } 95 } 96 }; 97 }, 98 confirm: function (options) { 99 var id = init(options); 100 var modal = $('#' + id); 101 modal.find('.ok').removeClass('btn-primary').addClass('btn-success'); 102 modal.find('.cancel').show(); 103 return { 104 id: id, 105 on: function (callback) { 106 if (callback && callback instanceof Function) { 107 modal.find('.ok').click(function () { callback(true); }); 108 modal.find('.cancel').click(function () { callback(false); }); 109 } 110 }, 111 hide: function (callback) { 112 if (callback && callback instanceof Function) { 113 modal.on('hide.bs.modal', function (e) { 114 callback(e); 115 }); 116 } 117 } 118 }; 119 }, 120 dialog: function (options) { 121 options = $.extend({}, { 122 title: 'title', 123 url: '', 124 width: 800, 125 height: 550, 126 onReady: function () { }, 127 onShown: function (e) { } 128 }, options || {}); 129 var modalId = generateId(); 130 131 var content = dialogdHtml.replace(reg, function (node, key) { 132 return { 133 Id: modalId, 134 Title: options.title 135 }[key]; 136 }); 137 $('body').append(content); 138 var target = $('#' + modalId); 139 target.find('.modal-body').load(options.url); 140 if (options.onReady()) 141 options.onReady.call(target); 142 target.modal(); 143 target.on('shown.bs.modal', function (e) { 144 if (options.onReady(e)) 145 options.onReady.call(target, e); 146 }); 147 target.on('hide.bs.modal', function (e) { 148 $('body').find(target).remove(); 149 }); 150 } 151 } 152 }(); 153 })(jQuery); 154 155 元件封裝
不瞭解元件封裝的朋友可以先看看相關文章。這裡我們的確認取消提示框主要用到了confirm這個屬性對應的方法。還是來看看如何呼叫吧：
1 //註冊刪除按鈕的事件 2 $("#btn_delete").click(function () { 3 //取表格的選中行資料 4 var arrselections = $("#tb_departments").bootstrapTable('getSelections'); 5 if (arrselections.length <= 0) { 6 toastr.warning('請選擇有效資料'); 7 return; 8 } 9 10 Ewin.confirm({ message: "確認要刪除選擇的資料嗎？" }).on(function (e) { 11 if (!e) { 12 return; 13 } 14 $.ajax({ 15 type: "post", 16 url: "/api/DepartmentApi/Delete", 17 data: { "": JSON.stringify(arrselections) }, 18 success: function (data, status) { 19 if (status == "success") { 20 toastr.success('提交資料成功'); 21 $("#tb_departments").bootstrapTable('refresh'); 22 } 23 }, 24 error: function () { 25 toastr.error('Error'); 26 }, 27 complete: function () { 28 29 } 30 31 }); 32 }); 33 });
message屬性傳入提示的資訊，on裡面注入點選按鈕後的回撥事件。
生成的效果：
2、bootbox元件的使用
在網上找bootstrap的彈出元件時總是可以看到bootbox這麼一個東西，確實是一個很簡單的元件，還是來看看如何使用吧。
當然要使用它必須要新增元件嘍。無非也是兩種方式：引入原始碼和Nuget。
接下來就是使用它了。首先當然是新增bootbox.js的引用了。然後就是在相應的地方呼叫了。
1 $("#btn_delete").click(function () { 2 var arrselections = $("#tb_departments").bootstrapTable('getSelections'); 3 if (arrselections.length <= 0) { 4 toastr.warning('請選擇有效資料'); 5 return; 6 } 7 8 bootbox.alert("確認刪除", function () { 9 var strResult = ""; 10 }) 11 bootbox.prompt("確認刪除", function (result) { 12 var strResult = result;相關推薦
Bootstrap：彈出框和提示框效果以及程式碼展示
前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，這
JS元件系列——Bootstrap寒冬暖身篇：彈出框和提示框效果以及程式碼展示
前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，這
JS元件Bootstrap實現彈出框和提示框效果程式碼
前言：對於Web開發人員，彈出框和提示框的使用肯定不會陌生，比如常見的表格新增和編輯功能，一般常見的主要有兩種處理方式：行內編輯和彈出框編輯。在增加使用者體驗方面，彈出框和提示框起著重要的作用，如果你的系統有一個友好的彈出提示框，自然能給使用者很好的頁面體驗。前面幾章介紹了bootstrap的幾個常用元件，
ios學習筆記之-點選一個按鈕彈出撥打電話提示框
按鈕的程式碼就不寫了。直接寫主要程式碼。 <key>LSApplicationQueriesSchemes</key> <array> <string>tel</string> <string>telp
selenium使用chrome進行登入時如何關閉彈出的密碼提示框
最近在使用chrome登入網站的時候總有密碼儲存提示框（並不是所有的都會有密碼儲存提示框） 其實只需要設定啟動chrome的相關引數就可以避免這種問題，引數： prefs[“credentials_enable_service”] = False pref
jQuery實現自定義樣式的彈出視窗和確認框
(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, msg); btn
【JQuery】控制元件-實現自定義樣式的彈出視窗和確認框
Html程式碼： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h
彈出訊息提示框，彈出確認取消，彈出物品獲得提示框
一、 彈出提示框 Globals.MUIManager.CreatMessageLabel("支付失敗"); public T GetUI<T>() where T : HotFix_Project.UI.UI_Logic
關於selenium關閉chrome密碼登入時彈出的密碼提示框
options = webdriver.ChromeOptions() prefs = {"":""} prefs["credentials_enable_service"] = False prefs["profile.password_manager_enabled"] = False options.a
替代alert的消息框和提示框
模式 back -h div osi lose body 由於 conf alert提示框由於外觀不太友好，所以一般都不用alert了。 我在這裏使用bootstrap的樣式，寫了一個可以單獨顯示消息，也可以確認取消的提示框。 使用的外觀如下： 一：單獨顯示
淺談對Bootstrap的看法之三（提示框和彈出框、滾動監聽、小工具）
1.提示框和彈出框相關說明：提示框和彈出框效果類似。提示框：通過向元素新增 data-toggle="tooltip" 來建立提示框，<a href="#" data-toggle="tooltip" title="我是提示內容!">滑鼠移動到我這</a&g
第二百四十六節，Bootstrap彈出框和警告框插件
popover 事件 png div 數字 ott hid strong selector Bootstrap彈出框和警告框插件 學習要點： 1.彈出框 2.警告框 本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。 一．彈出框 彈
Bootstrap 彈出框和警告框插件
bootstrap 彈出框和警告框插件 一．彈出框 彈出框即點擊一個元素彈出一個包含標題和內容的容器。 //基本用法 <button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" dat
js彈出框、對話框、提示框、彈窗總結
js彈出框、對話框、提示框、彈窗總結一、JS的三種最常見的對話框//====================== JS最常用三種彈出對話框 ======================== //彈出對話框並輸出一段提示信息 function ale() { /
Bootstrap modal彈出框實現列印的功能
頁面上引入bootstrap 相關 js html 頁面： <div class="modal fade" id="popPrintSheet" role="dialog" aria-labelledby="printSheet" aria-hidden="true" d
Selenium3+webdriver學習筆記13（js操作應用：彈出框無效如何處理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver學習筆記13（js操作應用：彈出框無效如何處理）'''from selenium import webdriverfrom selenium.webdriver.common.ac
bootstrap-layer彈出框的使用
它也是基於bootstrap的js,css,然後再引入layer.js https://www.cnblogs.com/phpnan/p/6541335.html 下載地址https://download.csdn.net/download/kxj19980524/10832565
jQuery+Bootstrap美化彈出框
專案中很多彈出的警告框是通過alert()彈出的瀏覽器警告框，樣式比較醜陋且和頁面使用的Bootstrap框架樣式不吻合，因此需要修改彈出框樣式。 採用jQuery+Bootstrap的方式這樣彈出的警告框樣式也就不會跳出前臺頁面框架。 jquery需要1.8以上，匯入jquery-co
Bootstrap.js 彈出框的使用方法
彈出框（Popover）外掛不像之前所討論的下拉選單及其他外掛那樣，它不是純 CSS 外掛。如需使用該外掛，您必須使用 jquery 啟用它（讀取 javascript）。使用下面的指令碼來啟用頁面中的所有的彈出框（popover）： $(function(){ $("[
給力的Bootstrap篇二：模態框和輪播效果
待寫，以作備忘 輪播程式碼： <div class="col-lg-8"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-inte