Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Afficher une div, et rendre le reste non sélectionnable.

10 réponses
Avatar
Pascal Bourdais
Bonjour,

J'ai commis ce truc :

http://pbourdais.chez.com/test1.html

ça fait globalement ce que je veux. J'ai juste une question :

Comment empêcher le clic sur Afficher quand la div est active ?

Dans l'exemple, il suffit de tester si elle n'est pas déjà ouverte, mais
dans le cas réel, je peux avoir une centaine de ligne sur lesquelles
cliquer, plus d'autres boutons.

Sur le site de la banque postale (par exemple), quand on se connecte, ça
ouvre une div, et le reste devient inaccessible. J'ai tenté une
recherche Google, mais comme je ne sais pas quoi chercher, ça n'aide pas.

Si quelqu'un pouvait me mettre sur une piste, ce serai sympa.

Merci,

Pascal

10 réponses

Avatar
Olivier B
Le 23/04/2010 23:45, Pascal Bourdais a écrit :
http://pbourdais.chez.com/test1.html

ça fait globalement ce que je veux. J'ai juste une question :
Comment empêcher le clic sur Afficher quand la div est active ?



Ça ne répond pas exactement à ta question : si en même temps que tu
affiches ta div, tu masques ton bouton "afficher" ?

--
Olivier B

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>
Avatar
Olivier B
Le 23/04/2010 23:45, Pascal Bourdais a écrit :
Sur le site de la banque postale (par exemple), quand on se connecte, ça
ouvre une div, et le reste devient inaccessible. J'ai tenté une
recherche Google, mais comme je ne sais pas quoi chercher, ça n'aide pas.



J'y pense : je ne connais pas le site de la poste mais il s'agit
probablement d'une "boite modale". C'est assez à la mode ces temps ci.

Il y a des trucs tout fait avec jquery et consort.

--
Olivier B

<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>
Avatar
Pascal Bourdais
Le 24/04/2010 00:21, Olivier B a écrit :
Le 23/04/2010 23:45, Pascal Bourdais a écrit :
Sur le site de la banque postale (par exemple), quand on se connecte, ça
ouvre une div, et le reste devient inaccessible. J'ai tenté une
recherche Google, mais comme je ne sais pas quoi chercher, ça n'aide pas.



J'y pense : je ne connais pas le site de la poste mais il s'agit
probablement d'une "boite modale". C'est assez à la mode ces temps ci.

Il y a des trucs tout fait avec jquery et consort.




C'est effectivement ça, merci.

C'est vrai que ça ressemble pas mal à du bricolage !

Bonne nuit,

Pascal
Avatar
B.M.
Le 24/04/2010 00:31, Pascal Bourdais a écrit :
Le 24/04/2010 00:21, Olivier B a écrit :
Le 23/04/2010 23:45, Pascal Bourdais a écrit :
Sur le site de la banque postale (par exemple), quand on se connecte, ça
ouvre une div, et le reste devient inaccessible. J'ai tenté une
recherche Google, mais comme je ne sais pas quoi chercher, ça n'aide
pas.



J'y pense : je ne connais pas le site de la poste mais il s'agit
probablement d'une "boite modale". C'est assez à la mode ces temps ci.

Il y a des trucs tout fait avec jquery et consort.




C'est effectivement ça, merci.

C'est vrai que ça ressemble pas mal à du bricolage !

Bonne nuit,

Pascal



J'ai bricolé quelque chose du genre avec mes petits doigts et ma petite
tête sans jquery et autres ici :
http://www.america-dreamz.com/bijoux_fetiches/bijoux_indiens.php
Pour voir l'effet il faut cliquer sur un nom de pierre (turquoise pour
la première bague).
En gros, le principe c'est qu'il faut inclure ta div dans une autre,
transparente (là j'ai joué sur l'opacité), qui recouvre tout l'écran et
jouer avec les z-index pour masquer le fond.
--
B. M.
Avatar
Pascal Bourdais
Le 24/04/2010 01:12, B.M. a écrit :
Le 24/04/2010 00:31, Pascal Bourdais a écrit :
Le 24/04/2010 00:21, Olivier B a écrit :
Le 23/04/2010 23:45, Pascal Bourdais a écrit :
Sur le site de la banque postale (par exemple), quand on se
connecte, ça
ouvre une div, et le reste devient inaccessible. J'ai tenté une
recherche Google, mais comme je ne sais pas quoi chercher, ça n'aide
pas.



J'y pense : je ne connais pas le site de la poste mais il s'agit
probablement d'une "boite modale". C'est assez à la mode ces temps ci.

Il y a des trucs tout fait avec jquery et consort.




C'est effectivement ça, merci.

C'est vrai que ça ressemble pas mal à du bricolage !

Bonne nuit,

Pascal



J'ai bricolé quelque chose du genre avec mes petits doigts et ma petite
tête sans jquery et autres ici :
http://www.america-dreamz.com/bijoux_fetiches/bijoux_indiens.php
Pour voir l'effet il faut cliquer sur un nom de pierre (turquoise pour
la première bague).
En gros, le principe c'est qu'il faut inclure ta div dans une autre,
transparente (là j'ai joué sur l'opacité), qui recouvre tout l'écran et
jouer avec les z-index pour masquer le fond.



C'est à peu près ce à quoi je pensais. Je me permettrai de regarder (et
peut-être bassement pomper).

Merci
Avatar
B.M.
Le 25/04/2010 18:46, Pascal Bourdais a écrit :
Le 24/04/2010 01:12, B.M. a écrit :
Le 24/04/2010 00:31, Pascal Bourdais a écrit :
Le 24/04/2010 00:21, Olivier B a écrit :
Le 23/04/2010 23:45, Pascal Bourdais a écrit :
Sur le site de la banque postale (par exemple), quand on se
connecte, ça
ouvre une div, et le reste devient inaccessible. J'ai tenté une
recherche Google, mais comme je ne sais pas quoi chercher, ça n'aide
pas.



J'y pense : je ne connais pas le site de la poste mais il s'agit
probablement d'une "boite modale". C'est assez à la mode ces temps ci.

Il y a des trucs tout fait avec jquery et consort.




C'est effectivement ça, merci.

C'est vrai que ça ressemble pas mal à du bricolage !

Bonne nuit,

Pascal



J'ai bricolé quelque chose du genre avec mes petits doigts et ma petite
tête sans jquery et autres ici :
http://www.america-dreamz.com/bijoux_fetiches/bijoux_indiens.php
Pour voir l'effet il faut cliquer sur un nom de pierre (turquoise pour
la première bague).
En gros, le principe c'est qu'il faut inclure ta div dans une autre,
transparente (là j'ai joué sur l'opacité), qui recouvre tout l'écran et
jouer avec les z-index pour masquer le fond.



C'est à peu près ce à quoi je pensais. Je me permettrai de regarder (et
peut-être bassement pomper).

Merci



Pas de problème.

--
B. M.
Avatar
Pierre Goiffon
On 24/04/2010 00:31, Pascal Bourdais wrote:
J'y pense : je ne connais pas le site de la poste mais il s'agit
probablement d'une "boite modale". C'est assez à la mode ces temps ci.

Il y a des trucs tout fait avec jquery et consort.




C'est effectivement ça, merci.



JQuery est sans doute assez "overkill" juste pour une boite modale...

Il existe pas mal de scripts gratuits déjà écrits... La difficulté
ensuite est de sélectionner celui qui est de qualité !
Les mots clés sont "lightbox" ou "modal dialog"...
Avatar
SAM
Le 4/26/10 11:43 AM, Pierre Goiffon a écrit :
On 24/04/2010 00:31, Pascal Bourdais wrote:
J'y pense : je ne connais pas le site de la poste mais il s'agit
probablement d'une "boite modale". C'est assez à la mode ces temps ci.

Il y a des trucs tout fait avec jquery et consort.




C'est effectivement ça, merci.



JQuery est sans doute assez "overkill" juste pour une boite modale...

Il existe pas mal de scripts gratuits déjà écrits... La difficulté
ensuite est de sélectionner celui qui est de qualité !
Les mots clés sont "lightbox" ou "modal dialog"...



dans le genre lidthbox je préfère litebox

mais ici il n'y a besoin de rien d'autre que de cacher le bouton
il n'y a vraiment pas à sortir la cavalerie quel qu'elle soit (AMHA)

--
sm
Avatar
Pascal Bourdais
Le Mon, 26 Apr 2010 13:17:27 +0200, SAM a écrit:
Le 4/26/10 11:43 AM, Pierre Goiffon a écrit :
On 24/04/2010 00:31, Pascal Bourdais wrote:





Bonjour,

Merci à tous, j'ai réussi à faire ce que je voulais.

J'ai une trentaine de bouton à « désactiver », la solution du 1 par 1
me semblai lourde. J'ai fait 2 fonctions somme toutes simple pour faire
ça, avec une div transparente sous la div contenant la form que j'affiche
pour désaciver les boutons :
document.getElementById('fond').style.display = 'inline';
document.getElementById('boite1').style.display = 'inline';

et que j'efface pour réactiver.
document.getElementById('fond').style.display = 'none';
document.getElementById('boite1').style.display = 'none';

Ça ne désactive pas la navigation par touche (tab + entrée) mais c'est
suffisant pour mon besoin.

pour info, ma css liée :

#boite1 {
display:none;
position:absolute;
top:25%;
left:5em;
right:5em;
width:auto;
height:50%;
z-index:5;
overflow: auto;
padding: 0;
background-color : white;
border-left: 16px gray solid;
border-right: 16px gray solid;
border-bottom: 16px gray solid;
color: black;
opacity : 1;
filter : alpha(opacity0);
-moz-opacity : 1;
}
#fond {
display: none;
position: absolute;
top : 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
border: none;
background-color : black;
opacity : 0.2;
filter : alpha(opacity );
-moz-opacity: .20;
}

s'il y a des c...ies, n'hésitez pas.




C'est effectivement ça, merci.



JQuery est sans doute assez "overkill" juste pour une boite modale...

Il existe pas mal de scripts gratuits déjà écrits... La difficulté
ensuite est de sélectionner celui qui est de qualité !
Les mots clés sont "lightbox" ou "modal dialog"...



dans le genre lidthbox je préfère litebox

mais ici il n'y a besoin de rien d'autre que de cacher le bouton
il n'y a vraiment pas à sortir la cavalerie quel qu'elle soit (AMHA)





--
Pascal
« Celui qui est prêt à sacrifier un peu de liberté pour obtenir un peu de
sécurité ne mérite vraiment ni l'une, ni l'autre. » ( Benjamin Franklin )
Avatar
SAM
Le 4/30/10 1:56 PM, Pascal Bourdais a écrit :

Bonjour,

Merci à tous, j'ai réussi à faire ce que je voulais.

J'ai une trentaine de bouton à « désactiver »,



Il suffit donc d'avoir une class donnée ou non au conteneur (au form)

css:
=== form.cache button.special { display: none }

JS :
=== function montreCacheBoutons() {
var f = document.forms[0];
f.className = f.className==''? 'cache' : '';
}


<form class="cache" action=" blabla >
<button class="special" onclick="doIt(1)">faire ceci</button>
<button class="special" onclick="doIt(2)">faire cela</button>
<button onclick="montreCacheBoutons()">
montrer/cacher les boutons
</button>
</form>

--
sm