模态显示窗口

来源：互联网发布：伦敦金今晚数据编辑：程序博客网时间：2024/06/05 16:29

<html>

<head>

<title>精简模式窗口</title>

/*层1的样式*/

.div1{

/*本层要实现覆盖模式窗口以外全部内容的半透明效果*/

background-color:#000000;/*背景色*/

position: absolute ;/*绝对定位，必选，使层绝对依照top,left的标准显示，否则将不能实现覆盖*/

top:0;/*层与页面顶部距离*/

left:0;/*层与左侧边距离*/

z-index:1;/*当发生重叠时的优先级，数大的会覆盖数较小的，没进行设置的均可视为小于0*/

display:none; /*层是否可见，初始化none不可见*/

filter:Alpha(opacity=30);/*过滤颜色，设置透明度（可见度）30，数越小越透明*/

}

/*层2的样式*/

.div2{

/*本层显示在最前端，其它控件均不可用*/

width:300px;/*显示宽度*/

height:200px;/*显示高度*/

position:absolute;/*绝对定位*/

z-index:2;/*优先级*/

display: none;/*是否显示*/

border:3px inset blue; /*边框：宽度，样式，颜色*/

background-color:#9999CC;/*背景色*/

}

/*当然你可以自定义添加或更改更多的样式都无所谓*/

</style>

//显示的方法，说明：前缀的div1、div2、body等，均为Id值

function popdiv_() {

$("#div_mode").css("display", "inline");

//div1.style.display="inline";//设置层1显示

$("#div_mode").css("width", $(document).width());

//div1.style.width=body.clientWidth;//设置层1宽度等于body宽度，width=100%也可以，不过有一些误差，所以最好用这个

$("#div_mode").css("height", $(document).height());

//div1.style.height=body.clientHeight;//设置层1高度满屏

$("#div_content").css("display", "inline");

//div2.style.display="inline";//设置层2的显示

$("#div_content").css("top",

$(document).height() / 2 - $("#div_content").height() / 2);

//div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法

$("#div_content").css("left",

$(document).width() / 2 - $("#div_content").width() / 2);

// div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法

}

function closeShow() {

$("#div_mode").css("display", "none");

$("#div_content").css("display", "none");

}

</script>

.div_mode { /*层1的样式*/

/*本层要实现覆盖模式窗口以外全部内容的半透明效果*/

background-color: #000000; /*背景色*/

position: absolute; /*绝对定位，必选，使层绝对依照top,left的标准显示，否则将不能实现覆盖*/

top: 0; /*层与页面顶部距离*/

left: 0; /*层与左侧边距离*/

z-index: 1; /*当发生重叠时的优先级，数大的会覆盖数较小的，没进行设置的均可视为小于0*/

display: none; /*层是否可见，初始化none不可见*/

filter: Alpha(opacity = 30); /*过滤颜色，设置透明度（可见度）30，数越小越透明*/

opacity: 0.5; /*Mozilla*/

}

/*层2的样式*/

.div_content { /*本层显示在最前端，其它控件均不可用*/

width: 300px; /*显示宽度*/

height: 200px; /*显示高度*/

position: absolute; /*绝对定位*/

z-index: 2; /*优先级*/

display: none; /*是否显示*/

border: 1px inset #98FB98; /*边框：宽度，样式，颜色*/

background-color: white; /*背景色*/

vertical-align: middle;

}

</style>

</head>

<div>fjdlsajfldjsaljfd;lsjal;kfjdsa

关闭

</label>

</div>

</div>

</body>

</html>

阅读全文

0 0