當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap实现弹出框和提示框效果代码

發布時間：2023/12/20 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap实现弹出框和提示框效果代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、Bootstrap彈出框
使用過JQuery UI應該知道，它里面有一個dialog的彈出框組件，功能也很豐富。與jQuery UI的dialog類似，Bootstrap里面也內置了彈出框組件。打開bootstrap 文檔可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的，也就是說，只要我們引入了bootstrap的文件，就可以直接使用它的dialog組件，是不是很方便。本篇我們就結合新增編輯的功能來介紹下bootstrap dialog的使用。廢話不多說，直接看來它如何使用吧。
1、cshtml界面代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

最外面的div定義了dialog的隱藏。我們重點來看看第二層的div

1	<div class="modal-dialog" role="document">

這個div定義了dialog，對應的class有三種尺寸的彈出框，如下：

1 2 3

第一種表示默認類型的彈出框；第二種表示增大的彈出框；第三種表示滿屏的彈出框。role="document"表示彈出框的對象的當前的document。

2、js里面將dialog show出來。
默認情況下，我們的彈出框是隱藏的，只有在用戶點擊某個操作的時候才會show出來。來看看js里面是如何處理的吧：

1 2 3 4 5

//注冊新增按鈕的事件 ?$("#btn_add").click(function () { ??$("#myModalLabel").text("新增"); ??$('#myModal').modal(); ?});

對，你沒有看錯，只需要這一句就能show出這個dialog.

1	$('#myModal').modal();

3、效果展示
新增效果

編輯效果

4、說明
彈出框顯示后，點擊界面上其他地方以及按Esc鍵都能隱藏彈出框，這樣使得用戶的操作更加友好。關于dialog里面關閉和保存按鈕的事件的初始化在項目里面一般是封裝過的，這個我們待會來看。

二、確認取消提示框
這種類型的提示框一般用于某些需要用戶確定才能進行的操作，比較常見的如：刪除操作、提交訂單操作等。

1、使用bootstrap彈出框確認取消提示框
介紹這個組件之前，就得說說組件封裝了，我們知道，像彈出框、確認取消提示框、信息提示框這些東西項目里面肯定是多處都要調用的，所以我們肯定是要封裝組件的。下面就來看看我們封裝的缺乏取消提示框。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153

不了解組件封裝的朋友可以先看看相關文章。這里我們的確認取消提示框主要用到了confirm這個屬性對應的方法。還是來看看如何調用吧：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

//注冊刪除按鈕的事件 $("#btn_delete").click(function () { ??//取表格的選中行數據 ??var arrselections = $("#tb_departments").bootstrapTable('getSelections'); ??if (arrselections.length <= 0) { ???toastr.warning('請選擇有效數據'); ???return; ??} ??Ewin.confirm({ message: "確認要刪除選擇的數據嗎？" }).on(function (e) { ???if (!e) { ????return; ???} ???$.ajax({ ????type: "post", ????url: "/api/DepartmentApi/Delete", ????data: { "": JSON.stringify(arrselections) }, ????success: function (data, status) { ?????if (status == "success") { ??????toastr.success('提交數據成功'); ??????$("#tb_departments").bootstrapTable('refresh'); ?????} ????}, ????error: function () { ?????toastr.error('Error'); ????}, ????complete: function () { ????} ???}); ??}); ?});

message屬性傳入提示的信息，on里面注入點擊按鈕后的回調事件。

生成的效果：

2、bootbox組件的使用
在網上找bootstrap的彈出組件時總是可以看到bootbox這么一個東西，確實是一個很簡單的組件，還是來看看如何使用吧。

當然要使用它必須要添加組件嘍。無非也是兩種方式：引入源碼和Nuget。

接下來就是使用它了。首先當然是添加bootbox.js的引用了。然后就是在相應的地方調用了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$("#btn_delete").click(function () { ???var arrselections = $("#tb_departments").bootstrapTable('getSelections'); ???if (arrselections.length <= 0) { ????toastr.warning('請選擇有效數據'); ????return; ???} ???bootbox.alert("確認刪除", function () { ????var strResult = ""; ???}) ???bootbox.prompt("確認刪除", function (result) { ????var strResult = result; ???}) ???bootbox.confirm("確認刪除", function (result) { ????var strResult = result; ???}) ???? ??});

效果展示：

更多用法可以參見api。使用起來基本很簡單。這個組件最大的特點就是和bootstrap的風格能夠很好的保持一致。

3、在網上還找到一個效果比較炫一點的提示框：sweetalert

要使用它，還是老規矩：Nuget。

（1）文檔

（2）在cshtml頁面引入js和css

??? <link href="~/Styles/sweetalert.css" rel="stylesheet" />
??? <script src="~/Scripts/sweetalert.min.js"></script>
（3）js使用
?　　　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

swal({ ???title: "操作提示",? //彈出框的title ???text: "確定刪除嗎？", //彈出框里面的提示文本 ???type: "warning",? //彈出框類型 ???showCancelButton: true, //是否顯示取消按鈕 ???confirmButtonColor: "#DD6B55",//確定按鈕顏色 ???cancelButtonText: "取消",//取消按鈕文本 ???confirmButtonText: "是的，確定刪除！",//確定按鈕上面的文檔 ???closeOnConfirm: true ??}, function () { ????$.ajax({ ?????type: "post", ?????url: "/Home/Delete", ?????data: { "": JSON.stringify(arrselections) }, ?????success: function (data, status) { ??????if (status == "success") { ???????toastr.success('提交數據成功'); ???????$("#tb_departments").bootstrapTable('refresh'); ??????} ?????}, ?????error: function () { ??????toastr.error('Error'); ?????}, ?????complete: function () { ?????} ????}); ??});

（4）效果展示：

點擊確定后進入回調函數：

組件很多，用哪種園友沒可以自行決定，不過博主覺得像一些互聯網、電子商務類型的網站用sweetalert效果比較合適，一般的內部系統可能也用不上。

三、操作完成提示框
1、toastr.js組件
關于信息提示框，博主項目中使用的是toastr.js這么一個組件，這個組件最大的好處就是異步、無阻塞，提示后可設置消失時間，并且可以將消息提示放到界面的各個地方。先來看看效果。

顯示在不同位置：

top-center位置

bottom-left位置

關于它的使用。

（1）、引入js和css?

1 2	<link href="~/Content/toastr/toastr.css" rel="stylesheet" /> <script src="~/Content/toastr/toastr.min.js"></script>

（2）、js初始化

1 2 3

將這個屬性值設置為不同的值就能讓提示信息顯示在不同的位置，如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等，更過位置信息請查看文檔。

（3）、使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//初始化編輯按鈕 $("#btn_edit").click(function () { ???var arrselections = $("#tb_departments").bootstrapTable('getSelections'); ???if (arrselections.length > 1) { ????toastr.warning('只能選擇一行進行編輯'); ????return; ???} ???if (arrselections.length <= 0) { ????toastr.warning('請選擇有效數據'); ????return; ???} ???? ???$('#myModal').modal(); ??});

使用起來就如下一句：

toastr.warning('只能選擇一行進行編輯');
是不是很簡單~~這里的有四種方法分別對應四種不同顏色的提示框。

toastr.success('提交數據成功');
toastr.error('Error');
toastr.warning('只能選擇一行進行編輯');
toastr.info('info');
分別對應上圖中的四種顏色的提示框。

2、Messenger組件
在Bootstrap中文網里面提到了一個alert組件：Messenger。

它的使用和toastr.js這個組件基本相似，只不過效果有點不太一樣。我們還是來看看它是如何使用的。

（1）效果展示

可以定位到網頁的不同位置，例如下圖中給出的下中位置、上中位置。

提示框的樣式有三種狀態：Success、Error、Info

并且支持四種不同樣式的提示框：Future、Block、Air、Ice

（2）組件使用以及代碼示例

關于它的使用和toastr大同小異，首先引入組件：

1 2 3

初始化它的位置

1 2 3 4 5

然后js里面使用如下：

1 2 3 4 5 6 7 8 9

$("#btn_delete").click(function () { ??$.globalMessenger().post({ ???message: "操作成功",//提示信息 ???type: 'info',//消息類型。error、info、success ???hideAfter: 2,//多長時間消失 ???showCloseButton:true,//是否顯示關閉按鈕 ???hideOnNavigate: true //是否隱藏導航 ?}); });

如果提示框使用默認樣式，也只有一句就能解決　

1 2 3 4

$.globalMessenger().post({ ???message: "操作成功",//提示信息 ???type: 'info',//消息類型。error、info、success ?});

很簡單很強大有木有~~

轉載于:https://www.cnblogs.com/hofmann/p/6272513.html

總結

以上是生活随笔為你收集整理的Bootstrap实现弹出框和提示框效果代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php拼音转为汉字方法二
下一篇：汤国安《地理信息系统教程》（第二版）笔记