JS Component bootstrap implementation pop-up box and prompt box effect code _javascript Tips

For web developers, the use of pop-up boxes and prompt boxes is certainly not unfamiliar, such as the common form of new and editing functions, commonly used mainly in two ways: inline editing and pop-up editing. Pop-up boxes and Cue boxes play an important role in increasing the user experience, and if your system has a friendly pop-up cue box, it will naturally give users a good page experience. The previous chapters introduce several common components of bootstrap, which look at the handling of pop-up boxes and cue boxes inside the bootstrap. In general, Pop-up prompts are mainly divided into three types: pop-up box, to determine the cancellation prompt box, information balloon . This article on the combination of these three types of different to introduce their use.

One, bootstrap pop-up box
Using the jquery UI you should know that it has a dialog popup component and a rich feature. Similar to the dialog of the jquery UI, a pop-up component is built into the bootstrap. Opening the bootstrap document can see that its dialog is embedded directly inside the Bootstrap.js and Bootstrap.css, that is, if we introduce the bootstrap file, we 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 "> <butto N type= "button" class= "Close" data-dismiss= "modal" aria-label= "Close" ><span "true" aria-hidden= ></button> 
 

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:

 Registers the event
  $ ("#btn_add") for the New button. 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 cl ass= "Modal-header" > ' + ' <button type= "button" class= "Close" data-dismiss= "modal" ><span "True" >x</span><span class= "sr-only" >Close</span></button> ' + ' 
 

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:

 Registers the Delete button event
 $ ("#btn_delete"). Click (function () {
   ///Fetch selected row data for 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 (' success in submission of information ');
       $ ("#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.

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

(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
    : "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 Closeonconfirm:true} above the button
   , function () {
     $.ajax ({
      type: Post),
      URL:"/home/ Delete ",
      data: {": Json.stringify (Arrselections)},
      success:function (data, status) {
       if (status = = "Su") Ccess ") {
        toastr.success (' Successful submission of data ');
        $ ("#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

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

Initializes the Edit button
$ ("#btn_edit"). Click (function () {
   var arrselections = $ ("#tb_departments"). Bootstraptable (' Getselections ');
   if (Arrselections.length > 1) {
    toastr.warning (' Only one row can be edited ');

    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

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: Operation succeeded,//prompt info
    type: ' Info ',// The message type. How long will the error, info, success
    hideafter:2,//disappear
    showclosebutton:true,//Show the Close button
    hideonnavigate:true// Whether to hide the Navigation
  });
 

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

 $.globalmessenger (). Post ({
    message: Operation succeeded,//prompt for type
    : ' Info ',//type. Error, info, success
  });

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

Iv. Summary
The above spent several hours to sort out several commonly used bootstrap pop-up and prompt box effect as well as the use of summary, I hope to help you learn.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course