1. Bootstrap pop-up box
Gardeners who have used JQuery UI should know that it has a dialog pop-up box component with rich functions. Similar to jQuery UI's dialog, Bootstrap also has a built-in popup component. Open the bootstrap document http://v3.bootcss.com/components/ and you can see that its dialog is directly embedded in bootstrap.js and bootstrap.css, that is to say, as long as we introduce the bootstrap file, we can directly Using its dialog component is not very convenient. In this article, we will introduce the use of bootstrap dialog in combination with the new editing function. Without further ado, let's see how it is used.
1, cshtml interface code
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">Parent Department</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">Department Level</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>
The outermost div defines the dialog's hiding. Let's focus on the div on the second layer
1 <div class="modal-dialog" role="document">
This div defines a dialog, and the corresponding class has three sizes of pop-up boxes, as follows:
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">
The first one represents the default type of popup box; the second one represents an enlarged popup box; the third one represents a full screen popup box. role="document" indicates the current document of the object of the popup box.
2. The dialog show will be displayed in js.
By default, our popup is hidden and only shown when the user clicks an action. Let's see how it is handled in js:
1 //Register the event of the new button
2 $("#btn_add").click(function () {
3 $("#myModalLabel").text("新增");
4 $('#myModal').modal();
5 });
Yes, you read that right, you only need this sentence to show the dialog.
$('#myModal').modal();
3. Effect display
new effect
edit effect
4. Description
After the pop-up box is displayed, clicking other places on the interface and pressing the Esc key can hide the pop-up box, which makes the user's operation more friendly. The initialization of the events of the close and save buttons in the dialog is generally encapsulated in the project, we will see this later.
2. Confirm the cancellation prompt box
This type of prompt box is generally used for certain operations that require user confirmation, such as deletion operations, order submission operations, and so on.
1. Use the bootstrap pop-up box to confirm and cancel the prompt box
Before introducing this component, we have to talk about component encapsulation. We know that things like pop-up boxes, confirmation and cancellation prompt boxes, and information prompt boxes must be called in multiple places, so we must encapsulate components. Let's take a look at the lack of cancellation prompt box that we encapsulated.
View Code
Friends who don't understand component encapsulation can read related articles first. Here our confirmation cancellation prompt box mainly uses the method corresponding to the confirm attribute. Let's see how to call it:
View Code
The message attribute is passed in the information of the prompt, and the callback event after the button is clicked is injected into the on.
Generated effect:
2. The use of bootbox components
When looking for bootstrap's pop-up components on the Internet, you can always see something like bootbox. It is indeed a very simple component. Let's take a look at how to use it.
bootbox API：http://bootboxjs.com/documentation.html
Of course, to use it, you must add components. There are only two ways: introducing source code and Nuget.
The next step is to use it. The first of course is to add a reference to bootbox.js. Then it is called in the corresponding place.
View Code
Show results:
For more usage, see api. It's basically simple to use. The biggest feature of this component is that it can be well consistent with the style of bootstrap.
3. I also found a prompt box with a more dazzling effect on the Internet: sweetalert
To use it, the old rules: Nuget.
(1) Documentation
sweetalert Api ：http://t4t5.github.io/sweetalert/
Open source project source code: https://github.com/t4t5/sweetalert
(2) Introduce js and css to the cshtml page
1 <link href="~/Styles/sweetalert.css" rel="stylesheet" /> 2 <script src="~/Scripts/sweetalert.min.js"></script>
(3) js use
1 swal({
2 title: "Operation Tips", //The title of the pop-up box
3 text: "Are you sure you want to delete?", //The prompt text in the pop-up box
4 type: "warning", //pop-up box type
5 showCancelButton: true, //whether to show the cancel button
6 confirmButtonColor: "#DD6B55",//Confirm button color
7 cancelButtonText: "Cancel",//Cancel button text
8 confirmButtonText: "Yes, confirm to delete!",//The document above the OK button
9 closeOnConfirm: true
10 }, function () {
11 $.ajax({
12 type: "post",
13 url: "/Home/Delete",
14 data: { "": JSON.stringify(arrselections) },
15 success: function (data, status) {
16 if (status == "success") {
17 toastr.success('successfully submitted data');
18 $("#tb_departments").bootstrapTable('refresh');
19 }
20 },
21 error: function () {
22 toastr.error('Error');
23 },
24 complete: function () {
25
26 }
27
28 });
29 });
(4) Effect display:
Click OK to enter the callback function:
There are many components, and the gardener can't decide which one to use, but bloggers feel that it is more suitable to use sweetalert for some Internet and e-commerce websites, and the general internal system may not be used.
3. Operation complete prompt box
1. toastr.js component
Regarding the information prompt box, the blogger project uses a component such as toastr.js . The biggest advantage of this component is that it is asynchronous and non-blocking. The disappearance time can be set after the prompt, and the message prompt can be placed in various places on the interface. Let's look at the effect first.
Official documentation and source code
Source website: http://codeseven.github.io/toastr/
api：http://www.ithao123.cn/content-2414918.html
about its use.
(1), import js and css
1 <link href="~/Content/toastr/toastr.css" rel="stylesheet" /> 2 <script src="~/Content/toastr/toastr.min.js"></script>
(2), js initialization
1 <script type="text/javascript"> 2 toastr.options.positionClass = 'toast-bottom-right'; 3 </script>
Setting this property value to a different value can make the prompt information displayed in different positions, such as toast-bottom-right for lower right, toast-bottom-center for lower middle, toast-top-center for upper middle, and more See documentation for location information.
(3), use
1 //Initialize the edit button
2 $("#btn_edit").click(function () {
3 var arrselections = $("#tb_departments").bootstrapTable('getSelections');
4 if (arrselections.length > 1) {
5 toastr.warning('Only one line can be selected for editing');
6
7 return;
8 }
9 if (arrselections.length <= 0) {
10 toastr.warning('Please select valid data');
11
12 return;
13 }
14
15 $('#myModal').modal();
16 });
It is used as follows:
1 toastr.warning('Only one line can be selected for editing');
Isn't it very simple~~ There are four methods here that correspond to four different color prompt boxes.
1 toastr.success('successful data submission');
2 toastr.error('Error');
3 toastr.warning('Only one line can be selected for editing');
4 toastr.info ('info');
They correspond to the four color prompt boxes in the above figure.
2. Messenger component
An alert component is mentioned in the Bootstrap Chinese website : Messenger.
Its use is basically similar to the toastr.js component, but the effect is a little different. Let's take a look at how it is used.
(1) Effect display
You can locate different positions on the web page, such as the lower middle position and the upper middle position given in the figure below.
The style of the prompt box has three states: Success, Error, Info
And supports four different styles of prompt boxes: Future, Block, Air, Ice
(2) Component usage and code examples
Messenger Api Documentation: http://www.bootcss.com/p/messenger/
Messenger source code: https://github.com/HubSpot/messenger
Its use is similar to toastr, first introduce the component:
1 <script src="~/Content/HubSpot-messenger-a3df9a6/build/js/messenger.js"></script> 2 <link href="~/Content/HubSpot-messenger-a3df9a6/build/css/messenger.css" rel="stylesheet" /> 3 <link href="~/Content/HubSpot-messenger-a3df9a6/build/css/messenger-theme-future.css" rel="stylesheet" />
where to initialize it
1 <script type="text/javascript">
2 $._messengerDefaults = {
3 extraClasses: 'messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right'
4 }
5 </script>
Then use it in js as follows:
1 $("#btn_delete").click(function () {
2 $.globalMessenger().post({
3 message: "Operation successful",//Prompt information
4 type: 'info',//Message type. error, info, success
5 hideAfter: 2,//How long to disappear
6 showCloseButton:true,//whether to display the close button
7 hideOnNavigate: true //whether to hide the navigation
8 });
9 });
If the prompt box uses the default style, only one sentence can solve it
1 $.globalMessenger().post({
2 message: "Operation successful",//Prompt information
3 type: 'info',//Message type. error, info, success
4 });
It's very simple, powerful, and woody~~
4. Summary
The above is the effect of several common bootstrap pop-up and prompt boxes that bloggers spent a few hours sorting out, as well as a summary of their use. Although it took a while, it is worth thinking about. If you think the article can help you more or less, please help to recommend it. After all, with your support, bloggers will have greater motivation. In addition, if the gardeners have any better pop-up prompt components, please let me know~~ Welcome to Paizhuan~~
In view of a question raised by the gardener, the blogger added a centered display effect to the toastr component, which is actually very simple. Record it here:
Add a style to the toastr.css file:
1 .toast-center-center {
2 top: 50%;
3 left: 50%;
4 margin-top: -25px;
5 margin-left: -150px;
6 }
Then when specifying the location
1 <script type="text/javascript"> 2 toastr.options.positionClass = 'toast-center-center'; 3 </script>
Get it, and see the effect:
