简单的蒙版

来源：互联网发布：java oracle sql分页编辑：程序博客网时间：2024/04/27 10:41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>蒙版</title><style type="text/css">body{    margin:0;}.backClass{    position:absolute;    width:100%;    height:100%;    z-index:1;    background-color:#999933;    filter:alpha(opacity=50);    -moz-opacity:0.5;    -khtml-opacity: 0.5;    opacity: 0.5;}#title{    position:absolute;    width:100%;    text-align:center;    z-index:0;}.popClass{    position:relative;    text-align:center;    top:200px;    margin:0 auto;    width:300px;    height:100px;    padding-top:50px;    z-index:2;    display:block;    background-color:#FFFFFF;}#back{    display:none;}#pop{    display:none;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){    $("#title").click(function(){    $("#back").attr("class", "backClass");    $("#pop").attr("class", "popClass");    $("#back").css("display", "block");    $("#pop").css("display", "block");    });    $("#ensure").click(function(){    $("#back").removeAttr("class");    $("#pop").removeAttr("class");    $("#back").css("display", "none");    $("#pop").css("display", "none");    });});</script></head><body>    <div id="title">        <a href="#">蒙版</a>    </div>    <div id="back"></div>    <div id="pop">        <div>哈喽，蒙版</div>        <p></p>        <div><input type="button" value="确定" id="ensure"/> </div>    </div></body></html>