[Résolu] Desactiver l'arrière plan d'un modal

Bonjour,

Est il possible de désactiver la sélection de l'arrière plan d'un modal, car comme sur la photo, le texte reste sélectionnable.


genre avec un "pointer-events" ou autre...voici le code disponible sur https://codepen.io/ricem/pen/abRvQKp.
Modifié par ricem (16 Jun 2023 - 11:52)

Bonjour,

Il existe un attribut html récent permettant d'atteindre cet objectif : "inert".

<main inert></main>

... qu'il faut bien sûr injecter en javascript :

const button = document.querySelector('.monBouton'),
      content = document.querySelector('.monContenuABloquer');
button.addEventListener('click', () => {
  content.forEach(e => e.hasAttribute('inert') ? e.removeAttribute('inert') : e.setAttribute('inert', ''));
});

Bien sûr, comme il est récent il ne fonctionne qu'avec les navigateurs... récents.

Mon site utilise ce procédé, sur cette page de formulaires de démonstration par exemple, si l'on réduit la taille de la fenêtre pour obtenir le menu hamburger, on peut voir que les inputs ne sont plus atteignables au clique, ni même au clavier, lorsque le menu est ouvert.

Je place "inert" sur le ou les éléments HTML les plus englobants, sans bien sûr qu'il ne puisse interférer avec ma navigation (ex : document.querySelectorAll('body > :not(.nav')).
Modifié par Olivier C (13 Jun 2023 - 14:56)

Salut,

En complément de ce qu'a rédigé notre ami Olivier et si tu veux une meilleure compatibilité avec des navigateurs moins récents, fais un petit tour sur cette url

Ok, je vois, rien de possible sans JS ...faudrait que je me mette au JS, mais ça me donne des nausées ^^

Hello, comme indiqué dans ce sujet https://forum.alsacreations.com/topic-4-90406-1-Resolu-Est-ce-la-bonne-pratique.html#p576690 en mettant le sélecteur sur le modal qui fait tout l'écran au lieu de juste l'image, l'arrière plan n'est plus sélectionnable.
Après je m'en contenterais