Technical explanation of bootstrap modal box

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:

76c82f278ac045591c9159d381de2c57100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30e4d0d87937f6c83b675e896c64d3eb7c9b2386ffb911b14667cb8f0f91ea547a7Bootstrap 实例 - 模态框（Modal）插件6e916e0f7d1e588d4f442bf645aedb2fe16c25b0d3200e635c0f304555350fbb9c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dc1a436a314ed609750bd7c7d319db4da创建模态框（Modal）2e9b454fa8428549ca2e64dfac4625cd253e627dbc2fa01f6214037dd834a664e0279a115e9482989f7cd173365c28be开始演示模态框65281c5ac262bf6d81768915a4a77ac0a98392ec65c6437d6e4b9996f54b3546e15b84117b89cdc64f55f35a64be57a7522dee5a9e032a609c190d198a2bc97ab1f4a67446def6c49a9f0aa21517b1ac0b561c7c414147a96bbbb8cc10c3d06d887f586697bed160e742603972f4d96b×65281c5ac262bf6d81768915a4a77ac05912a214071c80b42e3c910ba38a34bf模态框（Modal）标题0f6dfd1e3624ce5465eb402e300e01ae16b28748ea4df4d9c2150843fecfba686e1ceff927595656120650f97442eabc在这里添加一些文本16b28748ea4df4d9c2150843fecfba68fcea287e1681f6566fd9116658b8e4f0cfd8c5dabb18f775a551e9cd264a3236关闭65281c5ac262bf6d81768915a4a77ac0c0da018427a22f22a069c7d690eece88提交更改65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba68e9f77224a0414652ba58ce8584e25a9616b28748ea4df4d9c2150843fecfba68e6b48cd5ccb66bf83010803e33e4e2d016b28748ea4df4d9c2150843fecfba6859971daa6ca9293695a67ea967cd049d2cacc6d41bbb37262a98f745aa00fbf0170100c9ec0ddde5c9387ce2ffa5e5032cacc6d41bbb37262a98f745aa00fbf0d1094dcf8be83095e506452d1d966621
    // 只需要点击 ESC 键，模态窗口即会退出。
    $(function() {
        $('#myModal').modal({
            keyboard: false
        })
    });
2cacc6d41bbb37262a98f745aa00fbf0-->3f1c4e4b6b16bbbd69b2ee476dc4f83a$(function() {
    $('#myModal').modal('hide')
});2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83a$(function() {
    $('#myModal').on('hide.bs.modal',function() {
        alert('嘿，我听说您喜欢模态框...');
    })
});2cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

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 the bb9345e55eb71822850ff156dfde57c8 tag, 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 dc6dce4a544fdca2df29d5ac0ea9906b as a modal box.

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

aria-labelledby="myModalLabel", this attribute refers to the title of the modal box.

Attribute aria-hidden="true" Used to keep the modal window invisible until the trigger is fired (such as clicking on the relevant button) .

699e085bcbc1be17121184de54cd6b00, modal-header is a class that defines the style for the head of the modal window.

class="close", close is a CSS class used to style the close button of a modal window.

data-dismiss="modal", is a custom HTML5 data attribute. Here it is used to close the modal window.

class="modal-body", is a CSS class of Bootstrap CSS, used to set styles for the body of modal windows.

class="modal-footer", is a CSS class of Bootstrap CSS, used to set styles for the bottom of modal windows.

data-toggle="modal", HTML5 custom data attribute data-toggle is used to open a modal window.

Methods

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

Method	Description	Instance
Options: .modal(options)	Activate the content as a modal box. Accepts an optional options object.	$('#identifier').modal({keyboard: false})
Toggle: .modal('toggle')	Manually switch the modal box.	$('#identifier').modal('toggle')
Show: .modal('show')	Manually open the modal box.	$('#identifier').modal('show')
Hide: .modal('hide')	Manually hide the modal box.	$('#identifier').modal('hide')

 

事件

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

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作...})
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作...})
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作...})
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#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!