I first heard about modal when Brother Bao interviewed me over the phone last month and asked me if I knew about front-end modal. I was confused about my new term, so I asked Brother Bao to remind me, and he told me that it was a pop-up box on the interface. what? Wouldn’t it be better to use alter? ?

Last week I was mainly looking at the front-end code. It was really ugly and I didn’t write many comments... This is bad... Can you write more comments? Please Already...

Today I basically understand the modal.

What is a modal box

A modal box (Modal) is a child form covering the parent form. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent form. Subforms provide information, interaction, and more.

For example, as shown below: As soon as you click "Start Demonstration Modal Box", a box will pop up. We call this box a modal box

After knowing what modal box is, how to write an html? Without further ado, let me first take a look at my HTML code:

创建模态框（Modal）
开始演示模态框
×
模态框（Modal）标题
在这里添加一些文本
关闭提交更改

So you copy the above code and open it in the browser, and you find that it is ugly and the pop-up box cannot be implemented. function? Why is this? It's most likely because you didn't import bootstrap's css, js

First I downloaded bootstrap from the bootstrap official website; then quoted bootstrap's css and js

If you import it correctly, you will definitely be able to see this interface in the browser.

The effect is already there, let’s look at the code:

Code explanation:

• To use a modal window, you need to have some kind of trigger. You can use buttons or links. Here we are using buttons.

• If you look at the above code carefully, you will find that in thetag,data-target="#myModal"is what you want in The target of the modal loaded on the page. You can create multiple modals on the page and then create different triggers for each modal. Now, obviously, you can't load multiple modules at the same time, but you can create multiple modules on the page that load at different times.

• You need to pay attention to two points in the modal box:

1. The first is.modal, use To identify the content of

   as a modal box.

2. The second is.fadeclass. When the modal is toggled, it causes the content to fade in and out.

Methods

Here are some useful methods that can be used with modal().

$('#identifier').modal({keyboard: false})

$('#identifier').modal('toggle')

$('#identifier').modal('show')

$('#identifier').modal('hide')

事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

$('#identifier').on('show.bs.modal', function () { // 执行一些动作...})

$('#identifier').on('shown.bs.modal', function () { // 执行一些动作...})

$('#identifier').on('hide.bs.modal', function () { // 执行一些动作...})

$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作...})

参考资料：

Bootstrap模态框（Modal）插件

模态框modal.js

我把modal的练习放到Github上了：模态框

The above is the detailed content of Technical explanation of bootstrap modal box. For more information, please follow other related articles on the PHP Chinese website!