A brief analysis of the use of modal boxes in Bootstrap learning

This article will take you to understand the modal box in Bootstrap, and introduce how to change the size of the modal box and load remote content in the modal box. I hope it will be helpful to everyone!

In this tutorial, we will discuss the very useful Bootstrap jQuery plugin - Modal box.

Bootstrap Modal Box is a lightweight multi-purpose JavaScript popup window 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. [Related recommendations: "bootstrap Tutorial"]

Bootstrap modal box is mainly divided into three parts: header, body and page 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, you need to add 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: Custom attributes aria-labelledby and aria-hidden in the parent modal 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 a wrapper div nested within the parent modal box div. This div's class modal-content tells bootstrap.js where to look for the content of the modal. 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 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 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.

Change the size of the modal box

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

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 one 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 it on the selector of the modal box.modal()Method. 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：这可以是true或static。这定义你是否希望用户能够通过单击背景来关闭模态。
• keyboard：如果设置为true则模态框将通过ESC键关闭。
• show：用于打开和关闭模态框。它可以是true或false。
• remote：这是最炫酷的选择之一。它可以用于使用jQuery的load()方法加载远程内容。你需要在此选项中指定外部页面。默认设置为false。

Bootstrap模态框的事件

你可以通过使用在打开和关闭模态框时触发的各种事件来进一步自定义Bootstrap模态的普通行为。这些事件必须使用jQuery的.on()方法绑定。

可用的事件有：

• show.bs.modal：在模态框打开之前被触发。
• shown.bs.modal：在显示模态框后触发。
• hide.bs.modal：在模态框被隐藏之前触发。
• hidden.bs.modal：在模态关闭后触发。
• loaded.bs.modal：使用上述的remote选项在远程内容成功加载到模态框的内容区域时触发。

你可以像这样使用上述之一的事件：

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

在模态框中加载远程内容

在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代码而在弹出式画面中加载内容的最佳方式之一。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

The above is the detailed content of A brief analysis of the use of modal boxes in Bootstrap learning. For more information, please follow other related articles on the PHP Chinese website!