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();
})

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!