interface Web
js tutoriel
jQuery implémente la boîte de dialogue contextuelle du masque de bouton de clic (imitation de la boîte de dialogue de suppression de Tmall)_jquery
jQuery implémente la boîte de dialogue contextuelle du masque de bouton de clic (imitation de la boîte de dialogue de suppression de Tmall)_jquery
Lorsque nous faisons des achats sur Tmall, nous rencontrons souvent une boîte de dialogue qui apparaît vous demandant si vous souhaitez supprimer ou une boîte de dialogue de connexion qui apparaît après avoir cliqué sur le bouton Supprimer ou le bouton de connexion, et nous pouvons également voir les informations de notre précédente page en cliquant sur Non, les modifications correspondantes ne seront apportées qu'après avoir opéré dans la boîte de dialogue. La capture d'écran est la suivante (en prenant Tmall comme exemple) 
Comme le montre l'image, ce qui précède est le rendu de Tmall. En fait, cela est réalisé via jQuery, et le processus d'implémentation ne l'est pas. très compliqué, alors jetons maintenant un coup d'œil au processus de mise en œuvre.
D'abord la partie mise en page de la page : delete.html
;meta http -equiv="mots-clés" content="mot-clé1,mot-clé2,mot-clé3">
-equiv= "content-type" content="text/html; charset=UTF-8">
>
Invite lors de la suppression
voulez-vous vraiment supprimer cet enregistrement ? Il est à noter que je n'ai ajouté qu'un seul enregistrement, mais il peut en fait simuler plusieurs suppressions. de dossiers. Nous avons ici une structure div à trois couches, parmi lesquelles le masque et la boîte de dialogue nous permettent de la déclencher via jquery. Parlons ensuite de la disposition du CSS : commençons par le code : delete.html
Copiez le code
Le code est le suivant :
@CHARSET "UTF-8"
*{
marge : 0px ;
remplissage : 0px ;
}
.divShow{
.dialog{
largeur : 360px ; solid;
position : absolue ;
affichage : aucun ;
z-index : 101;//Assurez-vous que ce calque est affiché en haut
}
.dialog .title {
background:#fbaf15;
padding : 10px;
color: #fff;
font-weight: bold
}
.dialog .title; img{
float:right;
}
.dialog .content{
arrière-plan :
remplissage : 25px
hauteur : 60px ; 🎜>}
.dialog .content img{
float : gauche
}
.dialog .content span{
float : gauche
padding : 10px ; 🎜>
}
.dialog .bottom{
text-align: right;
padding: 10 10 10 0
background: #eee;
}
.mask{
largeur : 100 % ;
hauteur : 100 %
arrière-plan : #000 ; haut : 0px ;
gauche : 0px ;
affichage : aucun
z-index : 100 ;
}
.btn{
bordure : #666 ; 1px solide ;
largeur : 65px
}
Dans le fichier CSS, ce sur quoi je dois me concentrer est l'utilisation du z-index. Le z-index représente l'ordre d'empilement des calques. Si la valeur est plus élevée, cela signifie qu'elle est affichée sur le calque supérieur. . L'index z du masque est 100. L'index z de la boîte de dialogue est 100. L'index z est 101. La raison pour laquelle la valeur est suffisamment grande est de garantir qu'elle est absolument affichée au niveau supérieur. l'affichage de la couche div peut être contrôlé en augmentant la valeur.
L'étape suivante est le code js le plus important. Bien sûr, lors de l'utilisation de jquery, nous devons importer le package jquery :
delete.js
$(function(){
//Lier l'événement déclencheur du bouton de suppression
$("#button1").click(function (){
$(".mask").css("opacity","0.3").show();
showDialog();
$(".dialog"). show();
} );
/*
* Définit le HAUT et la gauche de la boîte de dialogue d'invite en fonction de la position de la page actuelle sur la barre de défilement
*/
function showDialog(){
var objw= $(window);//Fenêtre actuelle
var objc=$(".dialog");//Boîte de dialogue actuelle
var brsw=objw.width ();
var brsh=objw.height( );
var sclL=objw.scrollLeft();
var sclT=objw.scrollTop(); ;
var curh=objc.height();
//Calculer la marge gauche lorsque la boîte de dialogue est centrée
var left=sclL (brsw -curw)/2
var top=sclT; (brsh-curh)/2;
/ /Placer la boîte de dialogue au centre
objc.css({"left":left,"top":top}); }
//Déclenché lorsque la taille de la fenêtre de la page change Event
$(window).resize(function(){
if(!$(".dialog").is( ":visible")){
return;
}
showDialog();
});
//Enregistrer l'événement de clic de fermeture d'image
$(". title img").click(function(){
$(".dialog").hide();
$(".mask").hide();
});
//Annuler l'événement du bouton
$( "#noOk").click(function(){
$(".dialog").hide();
$(". masque").hide();
});
//OK bouton quitter
$("#ok").click(function(){
$( ".dialog").hide();
$(" .mask").hide();
if($("input:checked").length !=0){
//Notez qu'il ne peut pas y avoir d'espace au milieu du sélecteur de filtre $("input :checked") C'est faux
$(".divShow").remove();//Supprimer un certaine donnée
}
});
}); 🎜>Il convient de noter que l'agent principal est showDialog() pour la boîte de dialogue de confirmation dynamique Afficher l'emplacement.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quelle est la touche de raccourci pour changer de boîte de dialogue du bureau dans Windows 10 ? Liste des touches de raccourci pour changer de boîte de dialogue du bureau dans Windows 10 ?
Jul 12, 2023 pm 10:29 PM
Les utilisateurs de Windows 10 sont souvent confrontés à la situation d'ouvrir plusieurs boîtes de dialogue lorsqu'ils utilisent l'ordinateur. Il est donc très difficile de cliquer avec la souris. Alors, quelle est la touche de raccourci pour changer de boîte de dialogue du bureau dans Windows 10 ? Pour changer de fenêtre, appuyez simplement sur Alt+Tab. Si vous souhaitez basculer vers différents bureaux après avoir configuré l'écran partagé, appuyez simplement sur Win+Ctrl+clavier gauche/droite pour basculer rapidement, ce qui est très pratique. Liste des touches de raccourci pour changer de boîte de dialogue du bureau dans Windows 10 : 1. Changer de fenêtre : [Alt] + [Tab] 2. Vue des tâches : [Win] + [Tab], et la page ne disparaîtra pas lorsque vous relâcherez le clavier. . 3. Créez un nouveau bureau virtuel : [Win] + [C
Comment fermer la boîte de dialogue qui apparaît dans le logiciel d'installation win10
Dec 31, 2023 am 11:47 AM
Les utilisateurs utilisant le système Win10 ont rencontré une boîte de dialogue lors de l'installation du logiciel, ce qui est très gênant. Cependant, en fait, cette boîte peut être fermée. Peut-être que la plupart des utilisateurs ne peuvent pas l'utiliser, nous avons donc apporté un didacticiel à regarder ensemble. comment fermer la boîte de dialogue qui apparaît dans le logiciel d'installation win10. Comment fermer la boîte de dialogue qui apparaît dans le logiciel d'installation win10 : 1. Tout d'abord, appuyez sur la touche de raccourci « win+r » pour ouvrir run, entrez « control » et appuyez sur Entrée. 2. Sélectionnez ensuite « Sécurité et maintenance » à l'intérieur. 3. Cliquez ensuite sur « Modifier les paramètres de contrôle de compte d'utilisateur » sur la gauche. 4. Ensuite, maintenez enfoncé le petit carré bleu, abaissez-le jusqu'à la position « Ne jamais notifier » et cliquez sur OK.
Comment fermer automatiquement la zone de recherche contextuelle dans Windows 10
Jan 03, 2024 pm 12:45 PM
Certains amis sont toujours affectés par le champ de recherche contextuel lors de l'utilisation du système et ne savent pas comment fermer le champ de recherche contextuelle automatique dans Win10. Pour cette raison, une méthode de fermeture détaillée est fournie, ce qui peut aider. tout le monde ne doit pas être harcelé. Comment désactiver la fenêtre contextuelle automatique du champ de recherche dans Win10 : 1. Tout d'abord, cliquez avec le bouton droit sur le champ de recherche contextuel et entrez dans le menu. 2. Cliquez ensuite sur « Rechercher ». 3. Cliquez ensuite sur « Masquer » dans le menu contextuel. 4. Si vous souhaitez l'utiliser mais ne voulez pas être dérangé, vous pouvez cliquer sur « Afficher l'icône de recherche ».
Comment implémenter des boîtes de dialogue et des boîtes modales dans Vue ?
Jun 25, 2023 am 09:26 AM
Comment implémenter des boîtes de dialogue et des boîtes modales dans Vue ? Avec le développement et la mise à jour continus de la technologie frontale, le développement des pages frontales est devenu de plus en plus complexe et diversifié. Les boîtes de dialogue et les boîtes modales sont des éléments qui apparaissent souvent dans les pages frontales et peuvent nous aider à obtenir des effets interactifs plus flexibles et plus diversifiés. Dans Vue, il existe de nombreuses façons d'implémenter des boîtes de dialogue et des boîtes modales. Cet article vous présentera plusieurs méthodes d'implémentation courantes. 1. Utilisez les propres composants de Vue. Vue.js fournit certains composants intégrés, tels que transition et tra.
Comment résoudre le problème selon lequel le gestionnaire audio Realtek apparaît toujours lorsque vous jouez à des jeux sous Win7
Jul 18, 2023 pm 08:45 PM
Récemment, lorsque de nombreux utilisateurs du système Win7 jouent à des jeux sur leur ordinateur, ils signalent qu'ils affichent toujours automatiquement le gestionnaire audio Realtek, ce qui rend le retour automatique du jeu à l'interruption du bureau très ennuyeux. Comment faire face à un tel problème ? En réponse à ce problème, l'éditeur vous présentera la solution détaillée au problème selon lequel le gestionnaire audio Realtek apparaît toujours lorsque vous jouez à des jeux sur le système Win7. Comment résoudre le problème selon lequel le gestionnaire audio Realtek apparaît toujours lorsque vous jouez à des jeux sous Win7 ? 1. Nous pouvons cliquer sur le bouton du bureau, qui est le coin inférieur gauche de l’ordinateur. 2. Nous y trouvons une option d'action et nous pouvons cliquer dessus. Il entrera dans l’interface d’opération. 3. Dans l'interface d'opération, nous devons entrer msconfig. Après avoir entré, appuyez sur l’action ou la touche directe. 4. dans
Est-il facile pour Microsoft Edge d'autoriser les téléchargements nuisibles sur le navigateur ?
Oct 20, 2023 pm 02:37 PM
Microsoft Edge a une politique stricte en ce qui concerne les navigateurs autorisant les téléchargements nuisibles, mais il semble y avoir un léger changement à cet égard. Lorsque vous téléchargez un fichier « rare » ou tout ce que le navigateur juge dangereux, une boîte de dialogue supplémentaire apparaîtra si vous souhaitez conserver le téléchargement. Comme partagé par l'initié @Leopeva64 sur X (fkaTwitter), cette boîte de dialogue disparaît dans les versions Dev et Canary du navigateur. Il demande généralement à l'utilisateur de confirmer s'il souhaite télécharger le fichier et fournit une brève description des risques associés au téléchargement du fichier. Après avoir cliqué sur Conserver dans le menu à trois points, le fichier sera téléchargé automatiquement. Découvrez les différences entre la version stable et les autres versions ci-dessous : Téléchargez des fichiers "peu communs" ou ce qu'en pense Edge
Introduction à la fonction PHP — array_shift() : affiche les éléments au début du tableau
Jul 27, 2023 pm 10:57 PM
Introduction à la fonction PHP — array_shift() : affiche l'élément au début du tableau PHP est un langage de script largement utilisé, particulièrement adapté au développement Web. En PHP, de nombreuses fonctions de tableau puissantes sont fournies, dont la fonction array_shift(). Cette fonction supprime et renvoie le premier élément du début du tableau, tout en mettant à jour la valeur clé du tableau d'origine. La syntaxe de la fonction array_shift() est la suivante : Mixedarray_shift(arra
Conseils et méthodes pour utiliser CSS pour obtenir des effets pop-up lorsque la souris survole
Oct 26, 2023 am 08:42 AM
Techniques et méthodes d'utilisation de CSS pour implémenter des effets spéciaux pop-up lorsque la souris survole. Dans la conception de pages Web, nous rencontrons souvent le besoin d'effets spéciaux pop-up lorsque la souris survole. Cet effet spécial peut améliorer l'utilisateur. expérience et interactivité des pages. Cet article présentera les techniques et méthodes d'utilisation de CSS pour obtenir des effets contextuels lorsque la souris survole et fournira des exemples de code spécifiques. 1. Utilisez l'attribut de transition de CSS3 pour réaliser une animation en dégradé. L'attribut de transition de CSS3 peut réaliser l'animation en dégradé des éléments en définissant le temps de transition et la transition appropriés.
