您的位置 >>> 星想互联 >>> 课堂教学 >>> 教学案例
JQUERY注册代码
点击数:2767  发布时间2013-12-06 11:30:27

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{
 padding:0;margin:0
}
#main{
 width:100%;height:600px; background:#F00
}
#fullbg{
 position:absolute;top:0;left:0;display:none
}
#dialog {
    background-color:#fff;
    border:5px solid rgba(0,0,0, 0.4);
    height:400px;
    left:50%;
    margin:-200px 0 0 -200px;
    padding:1px;
    position:fixed !important; /* 浮动对话框 */
    position:absolute;
    top:50%;
    width:400px;
    z-index:5;
    border-radius:5px;
    display:none;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
        var bh = $("body").height();
        var bw = $("body").width();
  $("#reg").click(function(){
    $("#fullbg").css({
     height:bh,
     width:bw,
     background:"#000",
     filter:"alpha(opacity=50)",
    })
    $("#fullbg").show()
    $("#dialog").show()   
  })
  
  $("#cl").click(function(){
    $("#fullbg").hide()
    $("#dialog").hide()   
  })
 })
</script>


</head>

<body>
<div id="fullbg"></div>
<div id="main">
    <div><a href="#" id="reg">注册</a></div>
    <div id="dialog">
    <p class="close"><a href="#" id="cl">关闭</a></p>
    <div>正在加载,请稍后....</div>
    </div>
</div></body>
</html>

来源:星想互联