Maison > interface Web > tutoriel CSS > Comment ouvrir une fenêtre contextuelle de taille personnalisée avec JavaScript ?

Comment ouvrir une fenêtre contextuelle de taille personnalisée avec JavaScript ?

Mary-Kate Olsen
Libérer: 2024-10-30 07:23:02
original
688 Les gens l'ont consulté

How to Open a Custom-Sized Pop-Up Window with JavaScript?

Faire apparaître une nouvelle fenêtre avec des dimensions personnalisées

Dans le développement Web, il est parfois souhaitable d'ouvrir une nouvelle fenêtre dans un but spécifique, comme le partage de contenu sur une plateforme de médias sociaux. Cependant, l'utilisation de target="_blank" peut ne pas fournir les options de personnalisation souhaitées concernant les dimensions et le comportement de la nouvelle fenêtre.

Pour contrôler ces aspects, JavaScript peut être exploité pour obtenir le résultat souhaité. Considérez l'extrait de code suivant :

<code class="html"><a href="facebook.com/sharer" onclick="window.open(this.href, 'mywin',
'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">Share this</a></code>
Copier après la connexion

Ce code permet d'obtenir les résultats suivants :

  1. L'attribut target="_blank" est supprimé pour empêcher l'ouverture d'un nouvel onglet.
  2. Un gestionnaire onclick est ajouté pour appeler JavaScript lorsque le lien est cliqué.
  3. La fonction window.open() est appelée avec des paramètres spécifiques :
    a. this.href : L'URL à partager.
    b. 'mywin' : Le nom de la nouvelle fenêtre.
    c. Une série de propriétés séparées par des virgules :
    i. gauche et haut : Spécifie la position de la fenêtre sur l'écran en pixels.
    ii. width et height : Définit les dimensions de la fenêtre en pixels.
    iii. toolbar=1 : Spécifie que la fenêtre doit afficher une barre d'outils.
    iv. redimensionnable=0 : empêche l'utilisateur de redimensionner la fenêtre.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal