js+css réalise le calque pop-up masqué au centre (défilement avec la barre de défilement de la fenêtre du navigateur)

js+css réalise le calque pop-up masqué au centre (défilement avec la barre de défilement de la fenêtre du navigateur)

Copiez le code comme suit :

<!doctypehtml>

<tête>

<meta charset="utf-8" />

<titre></titre>

<style type="text/css">

*{}{marge :0;padding:0;}

html{}{_background:url(about:blank);} /**//* Empêcher le flash dans IE6, remplacer les fichiers vides par about:blank, réduire les requêtes*/

corps{}{fond :#fff; police : 12px/1.5 Tahoma,Genève, //5b8b//4f53, hauteur sans empattement :100 % ;}

.wrap{}{hauteur : 980px ; padding-top :20px;text-align:center;}

p{}{font-size:14px;text-align:center;line-height:24px;}

/**//** Calque de masque**/

#masqueur{}{

arrière-plan : #000 ;

affichage : aucun ;

filtre:alpha(opacité = 50);

opacité : 0,5 ;

haut : 0 ;

gauche : 0 ;

hauteur : 100 % ;

largeur : 100 % ;

indice z : 999 ;

position : fixe ;

_position : absolue ;

_left : expression (documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);

_top : expression (documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

}

/**//** Couche contextuelle**/

#surgir{}{

affichage : aucun ;

largeur : 300 px ;

indice z : 1000 ;

gauche : 50 % ;

haut : 50 % ;

position:fixe!important;

margin-left:-150px !important;

_position : absolue ;

_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ?

documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2 : /**//*IE6*/

document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2 /**//*IE5 IE5.5*/

}

.content{}{background:#f3f3f3;border:1px solid #999;}

.content h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;padding-left:5px;}

#clickbtn{}{margin-top:20px;}

</style>

</tête>

<corps>

<div>

<p>

Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal

<br />

Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal

<br />

Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal

<br />

Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal

<br />

Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal Je suis le texte principal

</p>

<input type="button" id="clickbtn" value="clike me" />

</div>

<div id="masklayer"></div>

<div id="popup">

<div>

<h3> Le calque contextuel est-il centré ? </h3>

<p>Centre, centre, centre, centre, centre, centre</p>

<p>Centre, centre, centre, centre, centre</p>

<p>Centre, centre, centre, centre</p>

<p>Centre, centre, centre</p>

</div>

</div>

<script type="text/javascript">

(fonction (masqueur){

var clickbtn = document.getElementById('clickbtn');

clickbtn.onclick = fonction(){

var popup = document.getElementById('popup');

masklayer.style.display='bloc';

popup.style.display = 'bloc';

var h = popup.clientHeight ;

avec(popup.style){

marginTop = -h/2+'px';

}

}

})(document.getElementById('masklayer'))

</script>

</corps>

</html>