复制代码代码如下:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> 简易弹出框 </title>
<style type = "text/css">
.mydiv {
Background-Color: #ff6;
borda: 5px sólido #f90;
Alinhamento de texto: centro;
altura da linha: 40px;
tamanho de fonte: 12px;
Peso da fonte: negrito;
Z-Index: 99;
Largura: 300px;
Altura: 120px;
Esquerda: 50%;/*ff ie7*/
topo: 50%;/*ff ie7*/
margem-esquerda: -150px! importante;/ *ff ie7 */
Margin-top: -60px! IMPORTANTE;/ *FF IE7 */
Margin-top: 0px;
Posição: Corrigido! IMPORTANTE;/*ff ie7*/
Posição: Absoluto;/*ie6*/
_top: expressão (avaliar (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*/
}
.bg {
Background-Color: #CCC;
largura: 100%;
Altura: 100%;
Esquerda: 0;
topo: 0;/*ff ie7*/
filtro: alfa (opacidade = 10);/*ie*/
Opacidade: 0,8;/*ff*/
Z-Index: 1;
Posição: Corrigido! IMPORTANTE;/*ff ie7*/
Posição: Absoluto;/*ie6*/
_top: expressão (avaliar (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*/
}
/*O fim*/
</style>
<script type = "text/javascript">
função showdiv () {
document.getElementById ('popdiv'). style.display = 'bloqueio';
document.getElementById ('bg'). style.display = 'bloqueio';
}
função fechada () {
document.getElementById ('PopDiv'). style.display = 'nenhum';
document.getElementById ('bg'). style.display = 'nenhum';
}
</script>
</head>
<Body>
<div id = "popdiv" style = "display: Nenhum;"> <br/> 弹框内容 <br/>
<a href = "javascript: fechado ()"> 关闭 </a> </div>
<div id = "bg" style = "display: nenhum;"> </div>
<div Style = "Top-top: 20px;">
<input type = "submit" name = "" value = "点此弹框" onclick = "javascript: showdiv ()" />
</div>
</body>
</html>