Test Popin Modalbox

Bonjour,

La quasi totalité de mes anciens scripts pour popup / infobulle étant hors du coup actuellement, j'ai recherché les alternatives fonctionnelles aujourd'hui.

J'ai testé la mise en pratique des info de ce site :
http://www.c17e.com/index.php/2016/04/30/creer-une-popin-responsive-sans-javascript/

Ça fonctionne partiellement car je me retrouve avec une erreur :
Le Popin devrait se fermer en cliquant sur la croix ou dans le gris autour de la fenêtre, mais pas en cliquant dans la fenêtre.
La croix de fermeture ne se trouve pas là ou elle devrait d'après le site et les liens dans ma fenêtre sont pour le coup non fonctionnel.
Par déduction, j'ai une erreur que je n'arrive pas à trouver... Un petit coup de main, svp ?

Je me suis inscrit sur ce site pour vous montrer le truc :
https://codepen.io/Jason3000/pen/pxWwZZ

Ensuite, si vous avez une meilleure ou plus simple solution pour un popin en css, j'accepte toute autre info...

Merci

Jason a écrit :
Le Popin devrait se fermer en cliquant sur la croix ou dans le gris autour de la fenêtre, mais pas en cliquant dans la fenêtre.
[...]
Je me suis inscrit sur ce site pour vous montrer le truc :
https://codepen.io/Jason3000/pen/pxWwZZ

Bonjour,

En fait votre solution fonctionne, mais il y a un lien de fermeture en trop (a#restici) qui, lui, englobe l'ensemble de la page, le lien a#restici au sein de la div.sp-body est, lui, bien placé.

Voici votre code corrigé : CodePen.

Bonjour Olivier C

Merci pour votre réponse

Le lien a#restici est une erreur de ma part, un "résidu" de test pour empêcher la page de remonter lors de la fermeture.
Ceci dit, vous avez supprimé toute la ligne,
<a href="#" class="sp-back"></a>
et de ce fait, il n'y a plus non plus la possibilité de fermeture en cliquant dans le gris comme dans le tuto donné sur : http://www.c17e.com
Ce qui est dommage...
De plus, j'ai remarque, dans mon cas comme dans le votre, que la croix de fermeture se trouve dans le gris alors qu'elle devrait se trouver dans la fenêtre blanche...

Leur exemple :
http://www.c17e.com/wp-content/uploads/2016/04/popin-responsive-sans-js.jpg

Merci pour tout complément d'info

Question bête : Existe-t-il encore un popup qui serait fonctionnel sur tout navigateur, même les plus anciens ?
Modifié par Jason (15 Oct 2018 - 10:43)

Ok. S'il sagit d'avoir la croix au sein de la div (ce qui est effectivement bien plus logique) ajoutez un 'position: relative' à '.smart-popin .sp-body' et laissez la magie opérer...

Re,
Merci Olivier C, la croix, ça fonctionne...

Et j'ai réussi à obtenir la fermeture en cliquant dans le gris.
Il fallait juste rajouter un : z-index: 1;
dans le : .smart-popin .sp-body

Reste par contre un point :
Par rapport au script de base, il devrait y avoir un cadre décoratif autour de la popin un peu comme ceci :


https://codepen.io/Jason3000/pen/MPOKKL?editors=1100#0

Si j'ai bien lu partout, ce type de popin se sera fonctionnel que sur les navigateurs récent et n'est pas géré sur IE en dessous de la version 11.
Existe-t-il encore un popup qui serait fonctionnel sur tout navigateur, même les plus anciens ?

@+
Modifié par Jason (15 Oct 2018 - 12:17)

Bien sûr mais en js. Honnêtement les popins en full css je ne suis pas fan, notamment parce que l'historique du navigateur garde trace de l'état toggle.
Modifié par Olivier C (15 Oct 2018 - 14:15)

Olivier C

Re,

Et un script correct en JS, vous auriez un bon modèle ou un lien ?

Merci

PS : Concernant l'historique, chez moi, il est supprimé automatiquement à la fermeture du navigateur...

Je parle de l'historique navigateur qui permet de retourner aux pages antérieures d'un même onglet.

Pour un exemple de popin js voir ici (bouton Ajax popin) : Scriptura.

Pour le code js associé : Github, js popin

Le CSS pour info : Github, css popin
Modifié par Olivier C (15 Oct 2018 - 16:26)

Merci Olivier C, je vais regarder ça...