What are the bootstrap modal boxes?

Bootstrap modal is a lightweight, multipurpose JavaScript popup that is customizable and responsive. You can use it to display warning windows, videos, and images in your website. Websites built with Bootstrap can use modals to display terms and conditions (as part of the registration process), videos, and even social media widgets.

In order to understand it better, let’s take a look at the various components of the Bootstrap modal box.

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

Default modal box

The default modal box is as follows:

To trigger the modal box status box, you need to add a link or button. The tag that triggers the element might look like this:

<a href="#" class="btn btn-lg btn-success" 
   data-toggle="modal" 
   data-target="#basicModal">Click to open Modal</a>

Note that the link element has two custom data attributes: data-toggle and data-target. The toggle tells Bootstrap what to do, and the target tells Bootstrap which element to open. So whenever such a link is clicked, a modal box with the id "basicModal" will appear.

Now let’s look at the code required to define the modal box:

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

The parent div of the modal box should have the same ID as used in the trigger element above. In our case it's id="basicModal".

Note: The custom attributes aria-labelledby and aria-hidden in the parent modal box element make it accessible. It's a good practice to make your website accessible to everyone, so you should use these attributes as they won't negatively affect the normal functionality of the modal.

In the HTML code of the modal box, we can see an encapsulating div nested within the parent modal box div. This div's class modal-content tells bootstrap.js where to look for the modal's content. Inside this div, we need to place the three parts mentioned earlier: header, body, and footer.

The modal box header, as the name suggests, is used to add a title or other elements such as an "x" close button to the modal. These elements should also have a data-dismiss attribute telling Bootstrap which element to hide.

Then let’s look at the text of the modal box. Think of it as an open canvas into 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. This area is right-aligned by default. In this area, you can place operation buttons such as "Save", "Close", "Accept", etc. These buttons are associated with the behavior that the "modal box" needs to display.

Now we have completed our first modal! You can check it out on our demo page.

Related recommendations: "bootstrap Getting Started Tutorial"

Change the size of the modal box

Bootstrap modal box is responsive Styled and flexible.

The modal box in Bootstrap 3.3.7 has two new styles: large and small. Add a modifier class modal-lg to divmodal-dialogdiv to get a larger modal box, and add modal-sm to get a smaller modal box.

Use jQuery to activate the modal box

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. For example:

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

The "options" here are JavaScript objects that can be passed to custom behaviors. For example:

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

Available options include:

backdrop: This can be true or static. This defines whether you want the user to be able to close the modal by clicking on the background.

keyboard: If set to true the modal box will be closed via the ESC key.

show: used to open and close the modal box. It can be true or false.

remote: This is one of the coolest options. It can be used to load remote content using jQuery's load() method. You need to specify external pages in this option. The default setting is false.

Events for Bootstrap modals

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

Available events are:

show.bs.modal: Triggered before the modal box is opened.

shown.bs.modal: Triggered after the modal box is shown.

hide.bs.modal: Triggered before the modal box is hidden.

hidden.bs.modal: Triggered after the modal is closed.

loaded.bs.modal: Use the above remote option to trigger when the remote content is successfully loaded into the content area of ​​the modal box.

You can use one of the above events like this:

$('#basicModal').on('shown.bs.modal', function (e) {
    alert('Modal is successfully shown!');
});

Loading remote content in a modal

在Bootstrap模式中加载远程内容有三种不同的方法。

第一种方法，如上所述,是使用对象options中的remote选项。其他两种方式都是没有JavaScript的，如下所示。

你可以为模态框的触发元素中的href属性提供一个值。在我们的例子中，触发器是一个链接。例如，我们可以不使用我们之前提到的值#而将URL包含在特定页面中：

<a class="btn btn-lg btn-default" 
   data-toggle="modal" 
   data-target="#largeModal" 
   href="remote-page.html">Click to open Modal</a>

你还可以为触发元素提供data-remote的自定义数据属性，而不是使用href属性。例如：

<a class="btn btn-lg btn-default" data-toggle="modal" 
   data-target="#largeModal" 
   data-remote="remote-page.html">Click to open Modal</a>

结论

模态框是Bootstrap 3提供的最好的插件之一。对于初级设计师来说，它是不需要任何JavaScript代码而在弹出式画面中加载内容的最佳方式之一。

The above is the detailed content of What are the bootstrap modal boxes?. For more information, please follow other related articles on the PHP Chinese website!