Bootstrap pop-up box and cue box effects and source code

One, bootstrap pop-up box





Friends who have used the jquery UI should know that it has a dialog pop-up component and a rich feature. Similar to the dialog of the jquery UI, a pop-up component is built into the bootstrap. Open Bootstrap Document http://v3.bootcss.com/components/ You can see that its dialog is directly embedded in the Bootstrap.js and Bootstrap.css, that is, as long as we introduce a bootstrap file, you can directly use its dialog components, is not very convenient. In this article we will combine the new editing function to introduce the use of Bootstrap dialog. No more nonsense, directly to see how it uses it.





1, cshtml interface code





<div class= "Modal Fade" id= "Mymodal" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" >


<div class= "Modal-dialog" role= "Document" >


<div class= "Modal-content" >


<div class= "Modal-header" >


<button type= "button" class= "Close" data-dismiss= "modal" aria-label= "close" ><span aria-hidden= "true" > ×</span></button>


<h4 class= "Modal-title" id= "Mymodallabel" > Add </h4>


</div>


<div class= "Modal-body" >





<div class= "Form-group" >


<label for= "Txt_departmentname" > Department name </label>


<input type= "text" name= "Txt_departmentname" class= "Form-control" id= "Txt_departmentname" placeholder= "department name" >


</div>


<div class= "Form-group" >


<label for= "Txt_parentdepartment" > Superior Department </label>


<input type= "text" name= "txt_parentdepartment" class= "Form-control" id= "Txt_parentdepartment" placeholder= "parent Department" >


</div>


<div class= "Form-group" >


<label for= "Txt_departmentlevel" > Departmental level </label>


<input type= "text" name= "Txt_departmentlevel" class= "Form-control" id= "Txt_departmentlevel" placeholder= "departmental Level" >


</div>


<div class= "Form-group" >


<label for= "Txt_statu" > Description </label>


<input type= "text" name= "Txt_statu" class= "Form-control" id= "Txt_statu" placeholder= "status" >


</div>


</div>


<div class= "Modal-footer" >


<button type= "button" class= "btn Btn-default" data-dismiss= "modal" ><span class= "Glyphicon glyphicon-remove" Aria-hidden= "true" ></span> close </button>


<button type= "button" id= "Btn_submit" class= "btn btn-primary" data-dismiss= "modal" ><span class= "Glyphicon" Glyphicon-floppy-disk "aria-hidden= true" ></span> save </button>


</div>


</div>


</div>


</div>





The outermost div defines the hidden dialog. Let's focus on the second level Div.





<div class= "Modal-dialog" role= "Document" >





This div defines the dialog, and the corresponding class has three sizes of pop-up boxes, as follows:





<div class= "Modal-dialog" role= "Document" >





<div class= "Modal-dialog modal-lg" role= "Document" >





<div class= "Modal-dialog modal-full" role= "Document" >





The first is a pop-up box that represents the default type, the second is an enlarged pop-up box, and the third represents a full screen pop-up box. Role= "Document" represents the current document of the object of the pop-up box.

2, JS inside will dialog show out.

By default, our pop-up box is hidden and will show only when the user clicks on an action. To see how the JS inside how to deal with it:

Registering the New button event
$ ("#btn_add"). Click (function () {
$ ("#myModalLabel"). Text ("Add");
$ (' #myModal '). Modal ();
});

Yes, you are not wrong, only need this sentence can show this dialog.

$ (' #myModal '). Modal ();

3, the effect shows

New effects

editing effects

4, the description

When the pop-up box is displayed, clicking on the other parts of the interface and pressing the ESC key can hide the pop-up box, which makes the user's operation more user-friendly. The initialization of the events in the dialog which closes and saves the button is generally encapsulated in the project, which we will see later.

Second, confirm the cancellation prompt box

This type of cue box is commonly used for certain actions that require user identification, such as delete operations, submit order actions, and more.

1, use the Bootstrap pop-up box to confirm the cancellation prompt box

Before introducing this component, we have to say that the component is encapsulated, we know, like pop-up box, confirm the cancellation prompt box, information box, these items must be called in many places, so we are sure to encapsulate the components. Here's a look at our encapsulated lack of a cancellation prompt box.

(function ($) {





Window. Ewin = function () {


var html = ' <div id= ' [id] ' class= ' modal fade ' role= ' dialog ' aria-labelledby= ' Modallabel ' > ' +


' <div class= ' modal-dialog modal-sm ' > ' +


' <div class= ' modal-content ' > ' +


' <div class= ' modal-header ' > ' +


' <button type= button ' class= ' close ' data-dismiss= ' modal ' ><span aria-hidden= ' true ' >×</ Span><span class= "sr-only" >Close</span></button> ' +


' <h4 class= ' modal-title ' id= ' Modallabel ' >[Title]</h4> ' +


' </div> ' +


' <div class= ' modal-body ' > ' +


' <p>[Message]</p> ' +


' </div> ' +


' <div class= ' modal-footer ' > ' +


' <button type= ' button ' class= ' btn btn-default Cancel ' data-dismiss= ' modal ' >[BtnCancel]</button> ' +


' <button type= button ' class= ' btn btn-primary ok ' data-dismiss= ' modal ' >[BtnOk]</button> ' +


' </div> ' +


' </div> ' +


' </div> ' +


' </div> ';








var dialogdhtml = ' <div id= ' [id] ' class= ' modal fade ' role= ' dialog ' aria-labelledby= ' Modallabel ' > ' +


' <div class= ' modal-dialog ' > ' +


' <div class= ' modal-content ' > ' +


' <div class= ' modal-header ' > ' +


' <button type= button ' class= ' close ' data-dismiss= ' modal ' ><span aria-hidden= ' true ' >×</ Span><span class= "sr-only" >Close</span></button> ' +


' <h4 class= ' modal-title ' id= ' Modallabel ' >[Title]</h4> ' +


' </div> ' +


' <div class= ' modal-body ' > ' +


' </div> ' +


' </div> ' +


' </div> ' +


' </div> ';


var reg = new RegExp ("\\[" ([^\\[\\]]*?) ", ' IgM ');


var Generateid = function () {


var date = new Date ();


Return ' MDL ' + date.valueof ();


}


var init = function (options) {


Options = $.extend ({}, {}


Title: "Action Prompt",


Message: "Prompt content",


Btnok: "OK",


Btncl: "Cancel",


WIDTH:200,


Auto:false


}, Options | | {});


var modalid = Generateid ();


var content = Html.replace (reg, function (node, key) {


return {


Id:modalid,


Title:options.title,


Message:options.message,


BtnOk:options.btnok,


BtnCancel:options.btncl


}[key];


});


$ (' body '). Append (content);


$ (' # ' + modalid). Modal ({


Width:options.width,


Backdrop: ' Static '


});


$ (' # ' + modalid). On (' Hide.bs.modal ', function (e) {


$ (' body '). Find (' # ' + modalid). Remove ();


});


return modalid;


}





return {


Alert:function (options) {


if (typeof options = ' string ') {


Options = {


Message:options


};


}


var id = init (options);


var modal = $ (' # ' + ID);


Modal.find ('. Ok '). Removeclass (' btn-success '). addclass (' btn-primary ');


Modal.find ('. Cancel '). Hide ();





return {


Id:id,


On:function (callback) {


If (callback && callback instanceof Function) {


Modal.find ('. Ok '). Click (function () {callback (TRUE);});


}


},


Hide:function (callback) {


If (callback && callback instanceof Function) {


Modal.on (' Hide.bs.modal ', function (e) {


Callback (e);


});


}


}


};


},


Confirm:function (options) {


var id = init (options);


var modal = $ (' # ' + ID);


Modal.find ('. Ok '). Removeclass (' Btn-primary '). addclass (' btn-success ');


Modal.find ('. Cancel '). Show ();


return {


Id:id,


On:function (callback) {


If (callback && callback instanceof Function) {


Modal.find ('. Ok '). Click (function () {callback (TRUE);});


Modal.find ('. Cancel '). Click (function () {callback (FALSE);});


}


},


Hide:function (callback) {


If (callback && callback instanceof Function) {


Modal.on (' Hide.bs.modal ', function (e) {


Callback (e);


});


}


}


};


},


Dialog:function (options) {


Options = $.extend ({}, {}


Title: ' Title ',


URL: ',


width:800,


HEIGHT:550,


Onready:function () {},


Onshown:function (e) {}


}, Options | | {});


var modalid = Generateid ();





var content = Dialogdhtml.replace (reg, function (node, key) {


return {


Id:modalid,


Title:options.title


}[key];


});


$ (' body '). Append (content);


var target = $ (' # ' + modalid);


Target.find ('. Modal-body '). Load (Options.url);


if (Options.onready ())


Options.onReady.call (target);


Target.modal ();


Target.on (' Shown.bs.modal ', function (e) {


if (Options.onready (e))


Options.onReady.call (target, E);


});


Target.on (' Hide.bs.modal ', function (e) {


$ (' body '). Find (target). Remove ();


});


}


}


}();


}) (JQuery);








Friends who do not understand component encapsulation can look at the relevant articles first. Here our confirmation cancellation prompt box is mainly used to confirm this attribute corresponding method. Let's take a look at how to call it:





Registering the Delete button event


$ ("#btn_delete"). Click (function () {


Take the selected row data of the table


var arrselections = $ ("#tb_departments"). Bootstraptable (' getselections ');


if (arrselections.length <= 0) {


Toastr.warning (' Please select valid data ');


Return


}





Ewin.confirm ({message:) Confirm that you want to delete the selected data? "}). 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 (' Submit data successful ');


$ ("#tb_departments"). Bootstraptable (' refresh ');


}


},


Error:function () {


Toastr.error (' error ');


},


Complete:function () {





}





});


});


});





The message property passes in the prompt information, on which the callback event is injected after the click button.





The effect of the build:

2, the use of Bootbox components

Looking for bootstrap pop-up components on the Internet can always see bootbox such a thing, is really a very simple component, or to see how to use it.

Bootbox api:http://bootboxjs.com/documentation.html

Of course, you have to add components to use it. But also two ways: the introduction of source code and NuGet.

The next step is to use it. First of all, of course, add a bootbox.js reference. Then it is called in the appropriate place.








$ ("#btn_delete"). Click (function () {


var arrselections = $ ("#tb_departments"). Bootstraptable (' getselections ');


if (arrselections.length <= 0) {


Toastr.warning (' Please select valid data ');


Return


}





Bootbox.alert ("Confirm deletion", function () {


var strresult = "";


})


Bootbox.prompt ("Confirm deletion", function (Result) {


var strresult = result;


})


Bootbox.confirm ("Confirm deletion", function (Result) {


var strresult = result;


})





});











Effect Display:

More usage can be found in the API. It is basically simple to use. The biggest feature of this component is that it is consistent with the bootstrap style.

3, on the internet also found a more dazzling effect of the tip box: Sweetalert

To use it, or the old rules: Nuget.





(1) Document





Sweetalert api:http://t4t5.github.io/sweetalert/





Open source project source code: Https://github.com/t4t5/sweetalert





(2) in the Cshtml page to introduce JS and CSS





<link href= "~/styles/sweetalert.css" rel= "stylesheet"/>


<script src= "~/scripts/sweetalert.min.js" ></script>





(3) JS use








Swal ({


Title: "Action Prompt",//Popup title of the box


Text: "OK delete?" ",//pop-up box inside the hint text


Type: "Warning",//Pop-up box type


Showcancelbutton:true,//whether to show the Cancel button


Confirmbuttoncolor: "#DD6B55",//OK button color


Cancelbuttontext: Cancel,//Cancel button text


Confirmbuttontext: "Yes, OK delete!" ",//determines the document above the button


Closeonconfirm:true


}, function () {


$.ajax ({


Type: "Post",


URL: "/home/delete",


Data: {"": Json.stringify (Arrselections)},


Success:function (data, status) {


if (status = = "Success") {


Toastr.success (' Submit data successful ');


$ ("#tb_departments"). Bootstraptable (' refresh ');


}


},


Error:function () {


Toastr.error (' error ');


},


Complete:function () {





}





});


});











(4) Effect display:

Click OK to enter the callback function:

Many components, with which kind of garden friends can not decide, but bloggers feel like some Internet, E-commerce type of Web site with Sweetalert effect is more appropriate, the general internal system may also not be used.

Three, the operation completes the prompt box

1, Toastr.js components

About the information balloon, Bo main project is used toastr.js such a component, the most benefit of this component is asynchronous, non-blocking, after the hint can set the vanishing time, and can put the message hint to the interface in various places. Take a look at the effect first.

Show in different locations:

Top-center position

Bottom-left position

Official documentation and source code





SOURCE site: http://codeseven.github.io/toastr/





Api:http://www.ithao123.cn/content-2414918.html





About the use of it.





(1), the introduction of JS and CSS





<link href= "~/content/toastr/toastr.css" rel= "stylesheet"/>


<script src= "~/content/toastr/toastr.min.js" ></script>





(2), JS initialization





<script type= "Text/javascript" >


Toastr.options.positionClass = ' toast-bottom-right ';


</script>





Setting this property value to a different value allows the message to be displayed in a different position, such as Toast-bottom-right, Toast-bottom-center, below, toast-top-center on medium, and more information on the location.





(3), using








Initialize Edit button


$ ("#btn_edit"). Click (function () {


var arrselections = $ ("#tb_departments"). Bootstraptable (' getselections ');


if (Arrselections.length > 1) {


Toastr.warning (' Only one row to edit ');





Return


}


if (arrselections.length <= 0) {


Toastr.warning (' Please select valid data ');





Return


}





$ (' #myModal '). Modal ();


});











Use it as the next sentence:





Toastr.warning (' Only one row to edit ');





is not very simple ~ ~ Here are four ways to correspond to four different color of the tip box.





Toastr.success (' Submit data successful ');





Toastr.error (' error ');





Toastr.warning (' Only one row to edit ');





Toastr.info (' info ');





A hint box that corresponds to the four colors in the previous figure respectively.

2, Messenger components

An alert component is mentioned in the bootstrap Chinese Web: Messenger.

Its use and toastr.js this component is basically similar, but the effect is a little different. Let's take a look at how it is used.

(1) Effect display

You can navigate to different places in the Web page, such as the bottom and top positions shown in the following illustration.

The style of the hint box has three states: Success, Error, Info

and supports four different styles of cue boxes: Future, block, Air, Ice

(2) Component usage and code example





Messenger API Documentation: http://www.bootcss.com/p/messenger/





Messenger Source: Https://github.com/HubSpot/messenger





With regard to its use and toastr the same, first introduced components:





<script src= "~/content/hubspot-messenger-a3df9a6/build/js/messenger.js" ></script>


<link href= "~/content/hubspot-messenger-a3df9a6/build/css/messenger.css" rel= "stylesheet"/>


<link href= "~/content/hubspot-messenger-a3df9a6/build/css/messenger-theme-future.css" rel= "stylesheet"/>





Initialize its location





<script type= "Text/javascript" >


$._messengerdefaults = {


Extraclasses: ' messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right '


}


</script>





Then JS inside is used as follows:





$ ("#btn_delete"). Click (function () {


$.globalmessenger (). Post ({


Message: "Successful operation"//Prompt


Type: ' Info ',//message type. Error, info, success


How long does it hideafter:2,//to disappear?


showclosebutton:true,//whether to show the Close button


Hideonnavigate:true//Whether to hide navigation


});


});








If the prompt box uses the default style, only one sentence can be resolved





$.globalmessenger (). Post ({


Message: "Successful operation"//Prompt


Type: ' Info ',//message type. Error, info, success


});





It's simple, it's powerful, there's wood.