In various web development processes, the processing of dialog boxes and prompt boxes is a very common interface processing technology. If used well, it can give users a good page experience. The same is true for Bootstrap development. We often use pop-up dialog box layers to display data on interfaces such as adding, editing, and viewing details. When deleting, a prompt confirmation box may be used. If the operation is successful, we can use a richer prompt box to handle it. This article mainly compares these technical points used in Bootstrap development.
1. Use of Bootstrap dialog box
The regular Bootstrap has several sizes of dialog boxes, including small dialog boxes with default state, medium-width dialog boxes, and full-size dialog boxes. The dialog box interface of Bootstrap is very friendly. When we use the ESC key or click other blank spaces with the mouse, the dialog box will be automatically hidden.
Their definitions are just different, such as the following is the default small dialog interface code:
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-toggle="validator" enctype="multipart/form-data"> <div> <div> <div> <div> <div> <label>Parent ID</label> <div> <select id="PID" name="PID" type="text" placeholder="parent ID..." ></select> </div> </div> </div> </div> <div> <div> <label>Name</label> <div> <input id="Name" name="Name" type="text" placeholder="name..." /> </div> </div> </div> <div> <div> <label>Remarks</label> <div> <textarea id="Note" name="Note" placeholder="Note..."></textarea> </div> </div> </div> </div> </div> </div> </div> <div> <input type="hidden" id="ID" name="ID" /> <button type="submit">Confirm</button> <button type="button" data-dismiss="modal">Cancel</button> </div> </form> </div> </div> </div> </div>
The approximate interface is as follows:
Pay attention to the dialog style code in the above code, as follows:
<div>
If it is a database of the other two sizes, you only need to modify it here. The two codes shown below are:
<div>
as well as
<div>
We can decide which size of dialog layer definition to adopt based on the layout of interface elements, but the call methods of these dialog boxes are consistent.
The dialog box interface is as follows:
//Show can select customer $("#btnSelectCustomer").show();The closing dialog box interface is as follows:
$("#add").modal("hide");Generally speaking, the dialog box we pops up is a form that can perform submission operations similar to saving data. Therefore, it is necessary to verify the data of the form. If there is an error, we may need to remind it on the interface. Therefore, when the page is initialized, the verification rules of the form need to be initialized. Below are our regular form initialization operations.
//Bind related event function BindEvent() { //Judge whether the form information passes verification $("#ffAdd").validate({ meta: "validate", errorElement: 'span', errorClass: 'help-block help-block-error', focusInvalid: false, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error'); label.remove(); }, errorPlacement: function (error, element) { element.parent('div').append(error); }, submitHandler: function (form) { $("#add").modal("hide"); //Send construct parameters to the background var postData = $("#ffAdd").serializeArray(); $.post(url, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { //Add the upload processing of portrait $('#file-Portrait').fileinput('upload'); //Save successfully 1. Close the pop-up layer, 2. Refresh the table data showTips("Save successfully"); Refresh(); } else { showError("Save failed:" + data.ErrorMessage, 3000); } }).error(function () { showTips("You are not authorized to use this function, please contact the administrator to handle it."); }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } }); } } }); } } }); } }But generally these codes will be repeated a lot, so we can encapsulate functions and reuse some code to use a simpler processing code, but we can also achieve the goal.
//Bind related events function BindEvent() { //Add and edit records formValidate("ffAdd", function (form) { $("#add").modal("hide"); //Send construct parameters to the background var postData = $("#ffAdd").serializeArray(); $.post(url, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { //Save successfully 1. Close the pop-up layer, 2. Refresh the table data showTips("Save successfully"); Refresh(); } else { showError("Save failed:" + data.ErrorMessage, 3000); } }).error(function () { showTips("You are not authorized to use this function, please contact the administrator to handle it."); }); }); }); }2. Delete confirmation dialog box processing
1) Use of bootbox plug-in
In addition to the regular dialog box above, we often encounter a concise confirmation dialog box. Although the above code can also be used to build a confirmation dialog box, it is not necessary to be so troublesome in general. You can use the confirmation dialog box of the plug-in bootbox to handle it.
Bootbox.js is a small JavaScript library that helps you quickly create a dialog box when using the bootstrap framework, and can also help you create, manage or delete any required DOM elements or js event handlers.
bootbox.js uses three methods to design mimic their native JavaScript some methods. Their exact method signature is flexible for each of them to take various parameters to customize the label and specify the default values, but they are often called the same:
bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
The only required parameters are alert is message; callback is required to confirm and prompt calls to determine the user's response. Even when calling the alarm callback is determined when the user rejects the dialog box because our wrapping method cannot block like their native language is useful: they are asynchronous rather than synchronous.
These three methods call one quarter of a public method, which you can also create using your own custom dialog:
bootbox.dialog(options)
For more API help documentation, please see: http://bootboxjs.com/documentation.html
Alert
bootbox.alert("Hello world!", function() {Example.show("Hello world callback");});Confirm
bootbox.confirm("Are you sure?", function(result) {Example.show("Confirm result: "+result);});Or code:
bootbox.confirm("Are you sure you delete the selected record?", function (result) { if (result) { //Finally remove the last comma, ids = ids.substring(0, ids.length - 1); //Then send the asynchronous request information to the background to delete the data var postData = { Ids: ids }; $.get("/Province/DeletebyIds", postData, function (json) { var data = $.parseJSON(json); if (data.Success) { showTips("Delete selected record successfully"); Refresh();//Refresh page data} else { showTips(data.ErrorMessage); } }); } }); } });Prompt
bootbox.prompt("What is your name?", function(result) {if (result === null) { Example.show("Prompt dismissed");} else { Example.show("Hi <b>"+result+"</b>");}});Custom Dialog
The effect of using the code and interface is as follows:
bootbox.dialog(…)
[2)
2) Use of sweetalert plug-in
Although the above effect is very consistent with the style of Bootstrap, the interface is a bit monotonous. The above effect is not what I like very much, I encountered an effect that looks more beautiful, as shown below.
This effect is implemented by introducing the plugin sweetalert (http://t4t5.github.io/sweetalert/).
swal({ title: "Operation prompt", text: newtips, type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", cancelButtonText: "Cancel", confirmButtonText: "Yes, execute delete!", closeOnConfirm: true }, function () { delFunction(); });The implementation code with similar interface effects above is as follows:
Generally, its pop-up code can be made very simple, as shown below.
3. Processing of information prompt box
The above two processing is implemented using pop-up dialog boxes and blocks the interface. Generally, we do information prompts, hoping that it will not affect our further operations, or at least provide a very short automatic disappearance effect.
So here we will introduce the jNotify plug-in and toast plug-in.
1) Use of jNotify prompt box
jNotify prompt box, an excellent jQuery result prompt box plugin. After submitting the form, we respond to the background through Ajax and return the results and display the return information in the foreground. jNotify can display the operation result information very elegantly. jNotify is a jQuery-based information prompt plug-in, which supports three information prompt methods: operation success, operation failure and operation reminder. jNotify browser has very good compatibility, supports changing prompt content, supports positioning the location of prompt boxes, and can configure plug-in parameters.
jSuccess(message,{option});jError("The operation failed, please try again!!");jNotify("Note: Please improve your <strong>personal information!</strong>");Detailed configuration of jNotify parameters:
autoHide : true, // Whether to automatically hide the prompt bar clickOverlay : false, // Whether to click the mask layer to close the prompt bar MinWidth : 200, // Minimum width TimeShown : 1500, // Display time: milliseconds ShowTimeEffect : 200, // Time to display on the page: milliseconds HideTimeEffect : 200, // Time to disappear from the page: milliseconds LongTrip : 15, // Displacement when the prompt bar is displayed and hidden HorizontalPosition : "right", // Horizontal Position: left, center, rightVerticalPosition : "bottom", // Vertical Position: top, center, bottomShowOverlay : true, // Whether to display the mask layer ColorOverlay : "#000", // Set the color of the mask layer OpacityOverlay : 0.3, // Set the transparency of the mask layer onClosed:fn // After closing the prompt box, execute the function, you can call other jNotify again. As mentioned above, the three calls are called in sequence.
Below is the public method I encapsulated in the script class to achieve the display of prompt effects.
//Show error or prompt message (requires jNotify related file) function showError(tips, TimeShown, autoHide) { jError( tips, { autoHide: autoHide || true, // added in v2.0 TimeShown: TimeShown || 1500, HorizontalPosition: 'center', VerticalPosition: 'top', ShowOverlay: true, ColorOverlay: '#000', onCompleted: function () { // added in v2.0 //alert('jNofity is completed !'); } } );}//Show prompt message function showTips(tips, TimeShown, autoHide) { jSuccess( tips, { autoHide: autoHide || true, // added in v2.0 TimeShown: TimeShown || 1500, HorizontalPosition: 'center', VerticalPosition: 'top', ShowOverlay: true, ColorOverlay: '#000', onCompleted: function () { // added in v2.0 //alert('jNofity is completed !'); } } );}In this way, when we use Ajax's POST method, we can prompt according to different needs.
var postData = $("#ffAdd").serializeArray(); $.post(url, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { //Add the upload processing of portrait $('#file-Portrait').fileinput('upload'); //Save successfully 1. Close the pop-up layer, 2. Refresh the table data showTips("Save successfully"); Refresh(); } else { showError("Save failed:" + data.ErrorMessage, 3000); } }).error(function () { showTips("You are not authorized to use this function, please contact the administrator to handle it."); });2) Use of toastr plug-in
toastr is a Javascript library for creating Gnome/Growl-style, non-blocking page message reminders. , toastr can set four notification modes: success, error, warning, and prompt. The location of the prompt window and animation effects can be set by number of energy. On the official website, you can select parameters to generate JS, which is very convenient to use.
The plugin address is: http://codeseven.github.io/toastr/
It can create the following effects: warning, danger, success, prompt dialog information, the effect is as follows.
Its use JS code is shown below.
//Show a warning, no title toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')//Show a success, the title toastr.success('Have fun storming the castle!', 'Miracle Max Says')//Show an error title toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')//Clear the current list toastr.clear()The parameter definition of this plug-in is as follows.
//Setting parameters, if the default value is used, the following generation of toastr.options = { "closeButton": false, //Whether to display the close button "debug": false, //Whether to use debug mode "positionClass": "toast-top-full-width", //The position of the pop-up window "showDuration": "300", //The animation time displayed "hideDuration": "1000", //The animation time disappearing "timeOut": "5000", //The display time "extendedTimeOut": "1000", //Extended display time "showEasing": "swing", //The animation buffering method during display "hideEasing": "linear", //Animation buffering method when disappearing "showMethod": "fadeIn", //Animation method when displaying "hideMethod": "fadeOut" //Animation method when disappearing}; //Success prompts to bind $("#success").click(function(){ toastr.success("Congratulations on your success"); })The above is my summary of my experience in processing and optimization of dialog boxes and prompt boxes in the project. I hope it will be helpful for everyone to learn and improve the web interface. If you want to know more information, please pay attention to the Wulin.com website!