Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the use of Bootstrap modal box". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In this tutorial, we will discuss a very useful Bootstrap jQuery plug-in-modal boxes.

The Bootstrap modal box is a lightweight multi-purpose JavaScript pop-up window that can be customized and responsive. You can use it to display warning windows, videos, and pictures on your website. Sites built using Bootstrap can use modal boxes to display terms and conditions (as part of the registration process), videos, and even social media widgets.

To better understand it, let's take a look at the various components of the Bootstrap modal box.

The Bootstrap modal box is mainly divided into three parts: header (header), text (body) and footer (footer). Each part has its own meaning, so we should use them correctly. We will discuss these later. What is the most exciting thing about the Bootstrap modal box? You don't need to write any JavaScript code to use it! All the code and styles are predefined by Bootstrap. All you have to do is use the correct tags and attributes to trigger it.

Default modal box

The default modal box is as follows:

To trigger the mode box, you need to add a link or button. The tag for the trigger element might look like this:

Click to open Modal

Notice that the link element has two custom data attributes: data-toggle and data-target. Toggle tells Bootstrap what to do, and target tells Bootstrap which element to open. So every time you click on such a link, a modal box with an id of "basicModal" appears.

Now let's look at the code needed to define the modal box:

× Modal title Modal Body Close Save changes

The parent div of the modal box should have the same ID used in the trigger element above. In our example, it is id= "basicModal".

Note: the custom attributes aria-labelledby and aria-hidden in the parent modal box element make them accessible. It's a good idea to make your site accessible to everyone, so you should use these properties because they don't have a negative impact on the normal functionality of the modal box.

In the HTML code of the modal box, we can see that a wrapper div is nested within the parent modal box div. The div class modal-content tells bootstrap.js where to find the contents of the modal box. In this div, we need to place the three parts mentioned earlier: the header, the body, and the footer.

The head of the modal box, as the name implies, is used to add a title to the mode or other elements such as the "x" close button. These elements should also have a data-dismiss attribute that tells Bootstrap which element to hide.

Then let's look at the text of the modal box. Think of it as an open canvas to which you can add any type of data, including embedded YouTube videos, images, or any other content.

Finally, let's take a look at the footer of the modal box. The area defaults to right alignment. In this area, you can place action buttons such as Save, close, and accept, which are associated with the behavior that the Modal Box needs to perform.

Change the size of the modal box

I mentioned earlier that the Bootstrap mode box is responsive and flexible. We will see how to change its size in this section.

There are two new styles of modal boxes in Bootstrap 3.3.7: large and small. Add a modifier class modal-lg to divmodal-dialogdiv to get a larger modal box, and modal-sm to get a smaller modal box.

Activate the modal box using jQuery

The modal box is a jQuery plug-in, so if you want to use jQuery to control the modal box, you need to call the .modal () method on the selector of the modal box. For example:

$('# basicModal') .modal (options)

The "options" here is a JavaScript object that can be passed to a custom behavior. For example:

Var options = {"backdrop": "static"}

The option available are:

Backdrop: this can be true or static. This defines whether you want the user to be able to turn off mode by clicking on the background.

Keyboard: if set to true, the modal box will be closed by ESC.

Show: used to turn the mode box on and off. It can be true or false.

Remote: this is one of the coolest choices. It can be used to load remote content using the load () method of jQuery. You need to specify an external page in this option. The default setting is false.

Events for the Bootstrap modal box

You can further customize the normal behavior of Bootstrap modes by using various events that are triggered when the modal box is opened and closed. These events must be bound using the .on () method of jQuery.

The events available are:

Show.bs.modal: triggered before the modal box is opened.

Shown.bs.modal: triggered after the modal box is displayed.

Hide.bs.modal: triggered before the modal box is hidden.

Hidden.bs.modal: triggered after the mode is turned off.

Loaded.bs.modal: triggered when remote content is successfully loaded into the content area of the modal box using the remote option above.

You can use one of the above events like this:

$('# basicModal') .on ('shown.bs.modal', function (e) {alert (' Modal is successfully shown content');}); load remote content in the modal box

There are three different ways to load remote content in Bootstrap mode.

The first method, as mentioned above, is to use the remote option in the object options. The other two methods do not have JavaScript, as shown below.

You can provide a value for the href attribute in the trigger element of the mode box. In our example, the trigger is a link. For example, we can include URL in a specific page instead of using the value # we mentioned earlier:

Click to open Modal

Instead of using the href attribute, you can also provide a custom data attribute of data-remote for the trigger element. For example:

Click to open Modal "what is the use of Bootstrap modal box" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.