content #3

# Web Site Writing Basics

# appscript

# google

1.The HTML Structure

First, build your HTML file infrastructure, consisting of two main parts: the ON / OFF button and the Modal box itself.

HTML

< div class = "toggle-container" >

< input type = "checkbox" id = "modal-toggle" class = "modal-toggle" >

< label for = "modal-toggle" class = "toggle-button" >

Open Modal

< / label >

< div class = "modal" >

< div class = "modal-content" >

< label for = "modal-toggle" class = "close-button" >

& times;

< / label >

< h2 > This is your Modal. < / h2 >

< p > You can put any content here...< / p >

< / div >

< / div >

< / div >

• < input type = "checkbox" >: This is the key to this technique. We will use the Checkbox checked or unchecked state as the Modal Display Controller.

• < label >: Used to connect to input using the attribute for which a value matches the id of input. Clicking < label > will cause the Checkbox to be checked or unchecked.

• < div class = "modal" >: This is the Modal box that we will hide at first.

2. CSS Management (The CSS Magic)

In the CSS section, we will use a special option (pseudo-classes) and a sibling combinator option to control the display of the Modal.

CSS

/ * Hide the real Checkbox * /

.modal-toggle {

Display: none;

}

/ * Set Modal default to hide * /

.modal {

Visibility: hidden;

Opacity: 0;

Transition: visibility 0s, opacity 0.5s; / * cause Fade-in / out effect * /

Position: fixed;

Top: 0;

Left: 0;

width: 100%;

Height: 100%;

Background-color: rgba (0, 0, 0, 0.5); / * Opaque background * /

Display: flex;

Justify-content: center;

align-items: center;

}

/ * When the Checkbox is selected (checked), display Modal * /

.modal-toggle: check ~ .modal {

Visibility: visible;

Opacity: 1;

}

/ * Decoration other parts as needed * /

.modal-content {

Background-color:# fff;

padding: 20px;

Border-radius: 8px;

width: 80%;

Max-width: 500px;

Position: relative;

Transform: translateY (-20px);

Transition: transform 0.5s ease-out;

}

.modal-toggle: check ~ .modal-content {

Transform: translateY (0);

}

. Close-button {

Position: absolute;

Top: 10px;

Right: 15px;

font-size: 24px;

Cursor: pointer;

Color:# aaa;

}

.toggle-button {

Cursor: pointer;

padding: 10px 20px;

Background-color: # 007bff;

Color: white;

Border-radius: 5xx;

Text-decoration: none;

Display: inline-block;

}

• .modal-toggle: check: This is the heart of the entire mechanism when the Checkbox is clicked until it is checked.

• ~ (General Sibling Combinator): This option selects the .modal element next to the .modal-toggle: checked element at the same level.

• visibility: visible; and opacity: 1;: When the above conditions are true, we change these properties to make the hidden Modal show up.

Working summary

When the user clicks on the "Open Modal" button, which is actually < label >, < input type = "checkbox" id = "modal-toggle" > changes the state to checked. When < input > is checked, the CSS Selector .modal-toggle: checked ~ .modal causes the previously hidden Modal to appear. When you click the "×" button, which is < label > that points back to < input > again, < input > changes the state back to unchecked, and the Modal hides down again.