Create a modal box example with HTML5 and CSS3

This article mainly introduces relevant information to you about the example of using HTML5 and CSS3 to create a modal box. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Source code example

Maybe you don’t want to read a bunch of lengthy instructions below, and want to directly view the source code or an online example. The link below is a functional modal box I created using CSS3 transition, opacity, pointer-event and other attributes.

You can click on it to go to Github to view the source code: ModalBox-Tutorial

HTML structure

The front-end components are driven by business and interaction scenarios Modal boxes are no exception. A common scenario is to perform an operation, such as clicking a button, and then display a modal box to provide feedback to the user or guide the user to perform the next interaction. The interaction of a modal box may include 5 steps:

1. There is a button or link, and the user clicks it to trigger the display of the modal box;

2. The display of the modal box When , there will be a transparent mask layer, covering the entire current viewport;

3. The content of the modal box will appear in a certain position of the viewport (usually white) in a non-transparent color (usually white) middle);

4. The content of the modal box (usually in the upper right corner) will have a "close" sign. Clicking it will hide the modal box;

5. The content of the modal box It should be specified based on the actual business scenario, so it can be any structure.

Style

1. .modalbox is initially hidden;

1. .modalbox is a transparent mask layer;

2. .modalbox-dialog is a non-transparent content layer;

3. After clicking the show modal box link, .modalbox will be displayed;

4. Click . After modalbox-close-btn, .modalbox will be hidden;

Effect example

##Related recommendations:

BootStrap modal box automatically closes after clicking save Code sharing

bootstrap modal box nesting, tabindex attribute, and shadow removal methods

Two ways to pop up the modal box in Angular

The above is the detailed content of Create a modal box example with HTML5 and CSS3. For more information, please follow other related articles on the PHP Chinese website!