The source code example
Perhaps you don’t want to read my lengthy description below, but want to look directly at the source code or an online example. The following link is a functional modal box that I create using the transition, opacity, pointer-event properties of CSS3.
You can click on it to go to Github to see the source code: Modalbox-Tutorial
HTML structure
Front-end components are driven by business and interaction scenarios, and modal boxes are no exception. A common scenario is to perform an action, such as clicking a button, and then display a modal box that feeds back to the user or directs the user to perform the following interaction. A modal box interaction may consist of five steps:
1. There is a button or link that the user clicks to trigger the display of the modal box;
2. When the modal frame is displayed, there will be a transparent mask layer to cover the entire viewport;
3. The contents of the modal box will appear in an opaque color (usually white) somewhere in the viewport (usually in the middle);
4. Modal box content (usually in the upper right corner) will have a “close” sign, click it will make the modal box hidden;
5. The content of the modal box should be specified according to the actual business scenario, so it can be any structure.
style
Modalbox is originally hidden;
Modalbox is a transparent mask layer.
Modalbox-dialog is an opaque content layer;
3. After clicking the link of display modalbox,. Modalbox will display;
4. Modalbox will hide after clicking. Modalbox -close-btn.
Effect of the sample
