JavaScript — case demonstration: pop up modal box

Time:2021-4-26

1Implementation mode 1

Steps:

1. Set the button in the input tab

2. Set the mouse click event

3. When the mouse clicks, a pop-up box will appear, and the overall background behind will change. First, create a good overall background

Then create the things in the box

4. First create a block level label box1 as the overall background, and set the height width outer border distance background color attribute of box1 (create a style label under the head label to write). At this time, the new label is not in the document, so you need to add it to the body label (first find the body label, and then add the box)

5. Create a box2 as the background of the pop-up box, add box2 to box1, add the background color of width and height to box2, and add it to box1

6. Make box2 center and distance display at the top

7. Set the attribute text in box2, pop up the modal box in the text box, and set the display position of the text in the box

8. Create box3, set attribute X in the text box, that is, we click the X cancel button in the upper right corner of the pop-up box, set the font color, background color width and height, and add it to box2

9. Just click x to restore to the original page. Add a click event to box3. Remove box1 from the body, so it's back to the original

Code demonstration:

JavaScript -- case demonstration: pop up modal boxJavaScript -- case demonstration: pop up modal box

Document

    
        .box1{

            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #f8d7fa;
        }
        .box2{
            width: 500px;
            height: 500px;
            background-color: #eeeeee;

            /*margin: 0 auto;*/
            /*margin-top: 100px;*/
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;

            text-align: center;
            line-height: 500px;
            color: red;
        }
        .box3{
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            color: #eeeeee;
            text-align: center;
            line-height: 50px;

        }
    




    var btn=document.getElementById("btn")
    btn.onclick=function () {
        //Alert (111) for testing
        //It's just built, but it's not in the documentation
        var box1=document.createElement("div")
        var box2=document.createElement("div")
        var box3=document.createElement("div")
        box3.innerText="X"
        Box2. InnerText = "pop it up"
        //If you add a class, then you have all the attributes of the class. Write decoupling in this way
        box1.classList.add("box1")
        box2.classList.add("box2")
        box3.classList.add("box3")
        box1.appendChild(box2)
        box2.appendChild(box3)

        //Find a tag and add it to the document
        var body=document.getElementsByTagName("body")[0]
        //  body.appendChild (box1) this or replace child is OK
        body.replaceChild(box1,btn)
        
        box3.onclick=function () {
            body.removeChild(box1)
            
        }
    }

Mode one

2、 Implementation mode 2

Steps:

1. Set the button in the input tab

2. Set box2 in box1, set box3 in box2, pop up modal box in box2, and X in box3,

3. Other colors, width, height, background and other properties remain unchanged. Display the attribute of box1: none;

4. Display the attribute of box1: none;

4. Set the input label, click the mouse event, and display the box1's display "block" in the function

5. Set the box1 label mouse click event, and hide the display of box1 "None" in the function to return to the original state

Code demonstration:

JavaScript -- case demonstration: pop up modal boxJavaScript -- case demonstration: pop up modal box

Document

    
        .box1{

            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #f8d7fa;
            display: none;
        }
        .box2{
            width: 500px;
            height: 500px;
            background-color: #eeeeee;

            /*margin: 0 auto;*/
            /*margin-top: 100px;*/
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;

            text-align: center;
            line-height: 500px;
            color: red;
        }
        .box3{
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            color: #eeeeee;
            text-align: center;
            line-height: 50px;

        }
    




    Pop up modal box
        X
    


    var btn=document.getElementById("btn")
    btn.onclick=function () {
        var box1=document.getElementsByClassName("box1")[0]
        box1.style.display="block"
    }

    var box3=document.getElementsByClassName("box3")[0]
    box3.onclick=function () {
        var box1=document.getElementsByClassName("box1")[0]
        box1.style.display="none"
    }

Mode 2

3、 Expand (let user input in modal box)

In the original place where the pop-up mode box is written, the user can input the user name and password and have the submit button

Add steps:

1. Create a form under box2, which contains a sub tag for the user to enter the user name and password to submit

2. Set the value of the user name and password under the box3 click time, so that you will not have memory after entering this time and opening it next time

3. Remove the line height of the text in box2, so that it will not overflow and look good

New code demo:

JavaScript -- case demonstration: pop up modal boxJavaScript -- case demonstration: pop up modal box

user name:
            
            
                password:
            
            
                
            
 
---------------------------------------
 document.getElementsByName("username")[0].value=""
        document.getElementsByName("password")[0].value=""

----------------------------------------
line-height: 500px; // Delete this line

New code needed for expansion

 

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]