What is the usage of popup in javascript-Front-end Q&A-php.cn

What is the usage of popup in javascript

PHPz

Release： 2023-04-21 15:25:41

Original

985 people have browsed it

JavaScript is an important technology in front-end development, and the pop-up window is also a very practical function in front-end development. This article will introduce in detail the usage of popup in JavaScript.

What is a popup window?

The popup window refers to a small window that pops up on a web page. It is usually some small functions, such as user login, forgotten password, etc. These functions require users to enter information at a specific time, and pop-up windows just meet this need.

How to implement pop-up window?

Before implementing the popup window, we need to understand a concept: DOM. The full name of DOM is "Document Object Model". It is a set of standards developed by the W3C organization to describe the hierarchical structure of documents. It parses documents into a set of structures composed of nodes and objects. Developers can operate these through the DOM API. nodes and objects.

In JavaScript, we implement pop-up windows through DOM operations. Specifically, we need to use the following three important steps:

Create a popup window

First, we need to create a popup window. This can be achieved by setting up a blank HTML page, or using JavaScript to dynamically create a new window object. As shown below:

var newWindow = window.open("", "newWindow", "width=200,height=100");

Copy after login

Among them, the first parameter is the opened URL. Since we do not need to open any page, it is set to the empty string "". The second parameter is the name of the new window. If a window named newWindow already exists, then that window will be opened; if it does not exist, a new window named newWindow will be created. The third parameter is the size of the new window.

Add content to the popup window

Next, we need to add content to the popup window. There are two main ways to add: one is to modify the HTML code of the pop-up window, and the other is to dynamically add new elements through JavaScript.

By modifying the HTML code, we can use the document.write() function to add HTML code to the popup. For example:

newWindow.document.write("<h1>Welcome to my popup window!</h1>");

Copy after login

To dynamically add new elements through JavaScript, you can use DOM operation functions such as createElement() and appendChild(). For example:

var popupDiv = newWindow.document.createElement("div");
popupDiv.appendChild(newWindow.document.createTextNode("This is a popup message!"));
newWindow.document.body.appendChild(popupDiv);

Copy after login

The above code dynamically creates a div element, adds a node with the text "This is a popup message!" to the div, and finally adds the div to the popup window.

Control the display and closing of the pop-up window

Finally, we need to control the display and closing of the pop-up window. The display and closing of the popup window can also be realized through JavaScript, as shown below:

// 显示popup窗口
newWindow.focus();

// 关闭popup窗口
newWindow.close();

Copy after login

Among them, the focus() function is used to transfer the focus to the popup window opened in the JavaScript code; close() The function is used to close the pop-up window.

Comprehensive example

The following is a more complete popup implementation example for readers' reference:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Popup</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            color: #3f51b5;
            margin-bottom: 20px;
        }
        button {
            background-color: #4caf50;
            border: none;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
    <script>
        function openPopup() {
            var newWindow = window.open("", "newWindow", "width=300,height=180");

            var popupDiv = newWindow.document.createElement("div");
            popupDiv.style.textAlign = "center";
            popupDiv.style.marginTop = "30px";

            var popupTitle = newWindow.document.createElement("h1");
            popupTitle.innerText = "This is a popup window!";
            popupDiv.appendChild(popupTitle);

            var popupMessage = newWindow.document.createElement("p");
            popupMessage.innerText = "Please enter your name:";
            popupDiv.appendChild(popupMessage);

            var popupInput = newWindow.document.createElement("input");
            popupInput.setAttribute("type", "text");
            popupInput.style.padding = "5px";
            popupInput.style.marginTop = "10px";
            popupInput.style.borderRadius = "3px";
            popupDiv.appendChild(popupInput);

            var popupButton = newWindow.document.createElement("button");
            popupButton.innerText = "Submit";
            popupButton.style.marginTop = "20px";
            popupButton.onclick = function() {
                alert("Hello, " + popupInput.value + "!");
                newWindow.close();
            };
            popupDiv.appendChild(popupButton);

            newWindow.document.body.appendChild(popupDiv);
            newWindow.focus();
        }
    </script>
</head>
<body>
    <button onclick="openPopup()">Open Popup</button>
</body>
</html>

Copy after login

The above code implements a very simple popup window, and the user clicks the open button , a pop-up window pops up, asking the user to enter a name, and then clicks the submit button, a dialog box pops up to display the entered name, and closes the pop-up window.

Summary

In front-end development, the pop-up window is a very practical function. Through the introduction of this article, readers have already understood the basic usage of popup in JavaScript, including operations such as creating, adding content, displaying and closing. I hope this article can help readers better understand pop-up windows in front-end development.

The above is the detailed content of What is the usage of popup in javascript. For more information, please follow other related articles on the PHP Chinese website!