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

Le
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
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier B
Le #22037411
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

Olivier B
Le #22037401
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

Pascal Bourdais
Le #22037391
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
B.M.
Le #22037381
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.
Pascal Bourdais
Le #22037361
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
B.M.
Le #22037351
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.
Pierre Goiffon
Le #22037311
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"...
SAM
Le #22037291
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
Pascal Bourdais
Le #22036991
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 )
SAM
Le #22036981
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
Publicité
Poster une réponse
Anonyme