JS component Bootstrap implementation pop-up box and prompt box effects code _ javascript skills

This article mainly introduces the JS component Bootstrap implementation pop-up box and prompt box effect code. For those interested in the pop-up box and prompt box, refer to: for Web developers, the use of pop-up boxes and prompt boxes is certainly not unfamiliar. For example, common table addition and editing functions are commonly used in two ways: in-row editing and pop-up box editing. The pop-up box and prompt box play an important role in increasing user experience. If your system has a friendly pop-up box, it will naturally give users a good page experience. The previous chapters introduce several common bootstrap components. This chapter describes how to process the pop-up box and prompt box in bootstrap. In general, there are three types of pop-up prompts: Dialog box, confirmation box, and information prompt box. This article introduces the use of these three types.

I. Bootstrap pop-up box
You should know that JQuery UI has a pop-up box component of dialog, which has rich functions. Similar to the dialog of jQuery UI, the Bootstrap has a built-in pop-up box component. Open the bootstrap document and you can see that dialogis directly embedded in bootstrap.jsand bootstrap.css. That is to say, as long as we introduce the bootstrap file, we can directly use its dialog component. Is it very convenient. In this article, we will introduce the use of bootstrap dialog with the newly added editing function. Let's just talk about how to use it.
1. cshtml interface code

    
      
        
          ×New
        
          
            Department name                      
          
            Superior department                      
          
            Department level                      
          
            Description                      
        
        
          Close          Save        
      
    
  

The outermost p defines the hiding of the dialog. Let's focus on the second layer of p.

This p defines the dialog, and the corresponding class has three pop-up boxes, as shown below:

The first is the pop-up box of the default type, the second is the pop-up box of the increase, and the third is the pop-up box of the full screen. Role = "document" indicates the current document of the object in the pop-up box.

2. show the dialog in js.
By default, the pop-up box is hidden. It is displayed only when you click an operation. Let's take a look at how JavaScript works:

// Register the event of the Add button $ ("# btn_add "). click (function () {$ ("# myModalLabel "). text ("add"); $ ('# mymodal '). modal ();});

Yes, you are not mistaken. You only need this sentence to show this dialog.

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

3. effect display
New Effect

Edit Effect

4. Description
After the pop-up box is displayed, you can click other places on the interface and Press Esc to hide the pop-up box. This makes your operations more friendly. The initialization of the close and save button events in the dialog is encapsulated in the project. We will see it later.

Ii. confirmation box
This type of prompt box is generally used for some operations that need to be confirmed by the user, such as delete operations, submit order operations, and so on.

1. Use the bootstrap pop-up box to confirm the cancellation prompt box.
Before introducing this component, we have to talk about the component encapsulation. We know that there must be multiple calls in the project, such as the pop-up box, the confirmation box, and the information prompt box, therefore, we must encapsulate components. Next let's take a look at the lack of cancellation prompts in our encapsulation.

(Function ($) {window. Ewin = function () {var html ='
'+'
'+'
'+'
'+'× Close'+' [Title] '+'
'+'
'+'
[Message]
'+'
'+'
'+'[BtnCancel]'+'[BtnOk]'+'
'+'
'+'
'+'
'; Var dialogdHtml ='
'+'
'+'
'+'
'+'× Close'+' [Title] '+'
'+'
'+'
'+'
'+'
'+'
'; Var reg = new RegExp ("\ [([^ \ [\] *?) \] ", 'Igm '); var generateId = function () {var date = new Date (); return 'mdl' + date. valueOf ();} var init = function (options) {options = $. extend ({}, {title: "Operation 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 );

If you are not familiar with component encapsulation, you can read related articles first. Here, the confirmation box mainly uses the method corresponding to the confirm attribute. Let's take a look at how to call it:

// Register the delete button event $ ("# btn_delete "). click (function () {// obtain the selected row data of the table var arrselections = $ ("# tb_ments ments "). bootstrapTable ('getselections '); if (arrselections. length <= 0) {toastr. warning ('select valid data'); return;} Ewin. confirm ({message: "Are you sure 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 ('data submitted successfully'); $ ("# tb_ments ments "). bootstrapTable ('refresh') ;}, error: function () {toastr. error ('error') ;}, complete: function (){}});});});

Message attribute, and inject the callback event after clicking the button in on.

Effect:

2. Use of the bootbox component
When I look for the bootstrap pop-up component on the Internet, I can always see such a thing as bootbox. It is indeed a very simple component. Let's take a look at how to use it.

To use it, you must add components. There are two methods: introducing source code and Nuget.

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

$ ("# Btn_delete "). click (function () {var arrselections = $ ("# tb_ments ments "). bootstrapTable ('getselections '); if (arrselections. length <= 0) {toastr. warning ('select valid data'); return;} bootbox. alert ("confirm to delete", function () {var strResult = "" ;}) bootbox. prompt ("confirm to delete", function (result) {var strResult = result;}) bootbox. confirm ("confirm deletion", function (result) {var strResult = result ;})});

Effect display:

For more methods, see api. It is easy to use. The biggest feature of this component is that it is consistent with the bootstrap style.

3. On the internet, find a more elegant prompt box: sweetalert

To use it, or the old rule: Nuget.

(1) Document

(2) Introduce js and css on the cshtml page