Comment créer des effets pop-up sympas avec JS et CSS3

Cet article partagera avec vous un effet de fenêtre contextuelle sympa réalisé en utilisant js et css3. L'arrière-plan entier est flou, ce qui est bien meilleur que la couleur unie et la transparence. Amis intéressés par les effets de fenêtre pop-up js, apprenons ensemble

Hier, alors que je regardais la télévision à la maison, j'ai trouvé un effet de fenêtre pop-up en sortant, et tout l'arrière-plan était flou. J'ai trouvé cet effet très cool et plus transparent qu'une couleur unie. Il y a tellement de fonctionnalités haut de gamme que j'ai essayé plusieurs interfaces successivement et j'ai finalement déterminé que l'effet était obtenu par CSS. Je suis donc arrivé tôt dans l'entreprise. ce matin et recherché rapidement Bien que la compatibilité soit extrêmement mauvaise, cela peut être fait avec un seul attribut CSS. J'ai immédiatement senti que j'en savais si peu ~~

Tout d'abord, rappelons l'implémentation des fenêtres pop-up. Généralement, nous sommes divisés en deux calques, le calque des fenêtres pop-up (popus) et le masque. calque (masque). Habituellement, il est d'usage de définir tous ces deux éléments sur un positionnement fixe. La différence spécifique entre eux et l'absolu sera connue une fois que vous les aurez essayés. Nous n’avons pas besoin de grand-chose pour le calque de masque. Nous définissons ses propriétés comme suit pour lui permettre de couvrir tout l’écran.

.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}

La couche popus est un peu plus gênante Nous avons ici deux méthodes d'implémentation

1. Connue La taille. de la fenêtre pop-up est la suivante, principalement réalisée via les marges supérieure, gauche et négative.

.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}

2. Si la taille de la fenêtre contextuelle est inconnue, obtenez la largeur et la hauteur du calque de la fenêtre contextuelle via js, puis définissez-la comme ci-dessus , qui ne sera pas décrit ici.

3. Lorsque CSS3 est pris en charge, nous n'avons pas besoin de connaître la largeur et la hauteur de la fenêtre pop-up, nous pouvons la définir comme suit

.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}

Principalement via Définissez-le avec l'attribut translation. Le pourcentage de la valeur de décalage est relatif à sa propre largeur et hauteur, donc en principe, il est similaire à la première méthode d'écriture, mais il est plus pratique à utiliser.

Pour en revenir au sujet, revenons au sujet, qui est de laisser les éléments réaliser l'effet de flou gaussien dans PS.

Voici un attribut CSS : filter. Notez que le filtre ici n'est pas le filtre dans IE. Si vous êtes intéressé, vous pouvez cliquer ici. Nous ne parlerons que d'un des flous aujourd'hui, regardez d'abord l'aperçu ci-dessous

ps : Actuellement, cet attribut ne prend en charge que les navigateurs webkit, nous utilisons donc directement l'attribut css3, et l'effet doit également être dans Navigateurs webkit Découvrez

N'est-ce pas incroyable ? Le code qui fonctionne est cette ligne - webkit-filter:blur(8px). Blur. Bien sûr, dans les projets quotidiens, nous pouvons également ajouter quelques animations pour rendre la page plus vivante. Le code complet de ce cas est le suivant :

<p class=&#39;bg&#39;>
 <img src=&#39;bg.jpg&#39; />
</p>
<p class=&#39;popus&#39;>
 效果是不是要好过纯色加透明呢
 <p>
 <p class=&#39;left btn &#39;>确实不错</p>
 <p class=&#39;right btn&#39;>也就那样</p>
 </p>
</p>

css : <.>

*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus p{width:220px;margin:10px auto}
.popus p.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus p.btn.right{float:right;color:#666}

js :

$('.bg').on('click',function(){
 console.log(98)
 $(this).addClass('blur');
 $('.popus').show();
})
$('.btn').on('click',function(){
 $('.bg').removeClass('blur');
 $('.popus').hide();
})

C'est la fin ? Évidemment non, regardez la console

Lorsque nous ouvrons la fenêtre, nous devons désactiver les événements de clic de nos autres couches, mais nous avons constaté que même si nous avons flouté l'autre layer , mais les événements correspondants ne sont pas désactivés. Bien sûr, la solution est également très simple. Nous pouvons ajouter un calque de masque sans couleur de fond et le recouvrir de cette façon, à chaque fois que nous cliquons, il agira. le calque de masque ne sera naturellement pas déclenché. L'événement sous-jacent sera déclenché.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

js et css3 pour obtenir un effet de rotation

JS et Canves pour obtenir un effet d'ondulation de l'eau sur le bouton clic

Javascript implémente un flux en cascade pour charger dynamiquement des images

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!