Jquery implémente une fenêtre contextuelle personnalisée example_jquery

Dans le développement de projets, si nous utilisons la boîte de dialogue d'invite fournie avec javascript, cela ne semble pas très beau, nous définissons donc généralement nous-mêmes certaines boîtes de dialogue. Ici, j'implémente une fenêtre de connexion qui apparaît lorsque je clique sur le bouton Cliquez sur la fenêtre. et vous pouvez Pour implémenter la fonction glisser-déposer, il y a trop de mots pour expliquer clairement, alors utilisez simplement du code pour parler.

Ici, je poste les codes HTML, CSS et Jquery séparément

Partie HTML :

Copier le code Le code est le suivant :

Pop-up partie supérieure-- >

< h3>Connectez-vous à Tencent Tiger Pass

×

>
;
< ;p class="prompt" id="username_p">Veuillez saisir le nom d'utilisateur

;

Veuillez saisir le mot de passe

;





submit" value="Connexion" class="inputstyle login" id="login"/>


table>

">

Vous pouvez utiliser la méthode suivante pour vous connecter

• QQ


• MSN< ;/ li>
  

>

Code pièce CSS :




Copier le code


Le code est le suivant :





Jquery代码：

复制代码 代码如下:





整個功能的程式碼都在這裡了
Étiquettes associées：
jquery 弹窗
source：php.cn
Article précédent：Le problème de nom de l'utilisation de window.open() pour ouvrir plusieurs fenêtres dans les compétences js_javascript Article suivant：Méthode pour encapsuler les classes et plug-ins jQuery dans les modules Seajs_Seajs
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
• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
• Que sont les plug-ins jquery ?
• Comment faire fonctionner json avec jquery
• Comment supprimer des éléments dans jquery
• Utilisation de la méthode jQuery hover()
• jquery implémente la méthode de pagination
• Qu'est-ce qu'un élément caché dans jquery
• Qu'est-ce qui est mis en évidence dans jquery
• Comment exprimer la valeur de la largeur en CSS
Recommandations populaires
• que signifie js
• Comment convertir une chaîne en tableau en js ?
• Comment actualiser la page en utilisant javascript
• Comment utiliser la fonction sqrt
• Comment supprimer un élément dans le tableau js
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1423172
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4268719
• 
  Tutoriel vidéo JAVA pour débutants

  2536480
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  507438
• 
  Tutoriel d'introduction PHP base zéro

  862759
• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1423172 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2536480 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  507438 temps d'étude
• 
  Introduction rapide au développement web front-end

  215852 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  890404 temps d'étude
• 
  [Web front-end] Démarrage rapide de Node.js

  7472 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  5959 temps d'étude
• 
  Aller au langage pratique GraphQL

  4937 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  697 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  24737 temps d'étude
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3
• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet
• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)
• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet


Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved

; Suivant Connexion automatique	Mot de passe oublié ?
Inscrivez-vous maintenant