How to achieve mask layer effect in Bootstrap? (code example)

The following article will introduce to you how toBootstrapachieve the mask layer effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Recommended related tutorials: "bootstrap Tutorial"

The renderings are as follows:

1. Click the open mask layer button

2. Pop up a hidden p

Source code download address: http://download.csdn.net/detail/u014175572/9564824

The implementation code is as follows:

                   
  
 
遮罩层DEMO
   打开遮罩层   
 
 
 
  ×  
 遮罩层标题 
 
 
 在这里添加一些文本 
 
 关闭   提交更改  
 
  
  
  

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 carefully at the code above, you will find that in thetag, data-target="#myModal" is the target of the modal you want to load 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:
  • The first is .modal, which is used to identify the content of

    as a modal box.

  • 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" is used to keep the modal window invisible until the trigger is fired (such as clicking on the relevant button).

• , modal-header is a class that defines styles for the header of modal windows.

• 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.

For more programming-related knowledge, please visit:Programming Teaching! !

The above is the detailed content of How to achieve mask layer effect in Bootstrap? (code example). For more information, please follow other related articles on the PHP Chinese website!