Maison >interface Web >Questions et réponses frontales >A quoi sert le popup en javascript
A quoi sert le popup en javascript
- PHPzoriginal
- 2023-04-21 14:15:20999parcourir
JavaScript est une technologie importante dans le développement front-end, et la fenêtre pop-up est également une fonction très pratique dans le développement front-end. Cet article présentera en détail l'utilisation des popups en JavaScript.
Qu'est-ce qu'une fenêtre popup ?
Une fenêtre popup fait référence à une petite fenêtre qui apparaît sur une page Web. Il s'agit généralement de petites fonctions, telles que la connexion d'un utilisateur, un mot de passe oublié, etc. Ces fonctions nécessitent que les utilisateurs saisissent des informations à un moment précis, et les fenêtres contextuelles répondent simplement à ce besoin.
Comment implémenter une fenêtre pop-up ?
Avant d'implémenter la fenêtre pop-up, nous devons d'abord comprendre un concept : DOM. Le nom complet du DOM est « Document Object Model ». Il s'agit d'un ensemble de normes développées par l'organisation W3C pour décrire la structure hiérarchique des documents. Il analyse les documents en un ensemble de structures composées de nœuds et d'objets. l'API DOM.
En JavaScript, nous implémentons des fenêtres pop-up via des opérations DOM. Plus précisément, nous devons suivre les trois étapes importantes suivantes :
- Créer la fenêtre contextuelle
Tout d'abord, nous devons créer la fenêtre contextuelle. Ceci peut être réalisé en créant une page HTML vierge ou en utilisant JavaScript pour créer dynamiquement un nouvel objet fenêtre. Comme indiqué ci-dessous :
var newWindow = window.open("", "newWindow", "width=200,height=100");
Parmi eux, le premier paramètre est l'URL ouverte puisque nous n'avons besoin d'ouvrir aucune page, elle est définie sur la chaîne vide "". Le deuxième paramètre est le nom de la nouvelle fenêtre. Si une fenêtre nommée newWindow existe déjà, alors cette fenêtre sera ouverte ; si elle n'existe pas, une nouvelle fenêtre nommée newWindow sera créée. Le troisième paramètre est la taille de la nouvelle fenêtre.
- Ajouter du contenu à la popup
Ensuite, nous devons ajouter du contenu à la popup. Il existe deux manières principales d'ajouter : l'une consiste à modifier le code HTML de la fenêtre contextuelle et l'autre consiste à ajouter dynamiquement de nouveaux éléments via JavaScript.
En modifiant le code HTML, nous pouvons utiliser la fonction document.write() pour ajouter du code HTML à la popup. Par exemple :
newWindow.document.write("<h1>Welcome to my popup window!</h1>");
Pour ajouter dynamiquement de nouveaux éléments via JavaScript, vous pouvez utiliser des fonctions de manipulation DOM telles que createElement() et appendChild(). Par exemple :
var popupDiv = newWindow.document.createElement("div");
popupDiv.appendChild(newWindow.document.createTextNode("This is a popup message!"));
newWindow.document.body.appendChild(popupDiv);
Le code ci-dessus crée dynamiquement un élément div, ajoute un nœud avec le texte "Ceci est un message contextuel !" au div, et ajoute enfin le div à la fenêtre contextuelle.
- Contrôler l'affichage et la fermeture de la fenêtre pop-up
Enfin, nous devons contrôler l'affichage et la fermeture de la fenêtre pop-up. L'affichage et la fermeture de la fenêtre popup peuvent également être réalisés via JavaScript, comme indiqué ci-dessous :
// 显示popup窗口 newWindow.focus(); // 关闭popup窗口 newWindow.close();
Parmi elles, la fonction focus() est utilisée pour transférer le focus vers la fenêtre popup ouverte dans le code JavaScript ; est utilisé pour fermer la fenêtre contextuelle.
Exemple complet
Ce qui suit est un exemple d'implémentation de fenêtre contextuelle plus complète pour la référence des lecteurs :
<!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>
Le code ci-dessus implémente une fenêtre contextuelle très simple Lorsque l'utilisateur clique sur le bouton d'ouverture, la fenêtre contextuelle apparaît, demandant à l'utilisateur. pour saisir leur nom, puis cliquez sur le bouton Soumettre, une boîte de dialogue apparaîtra pour afficher le nom saisi et la fenêtre contextuelle sera fermée.
Résumé
En développement front-end, la fenêtre pop-up est une fonction très pratique. Grâce à l'introduction de cet article, les lecteurs ont déjà compris l'utilisation de base des popups en JavaScript, y compris les opérations telles que la création, l'ajout de contenu, l'affichage et la fermeture. J'espère que cet article pourra aider les lecteurs à mieux comprendre les fenêtres contextuelles dans le développement front-end.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!