jquery蒙板 + 弹出层效果

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>弹出DIV</title>
        <script type="text/javascript" src="js/jquery.js"></script>
    <style>
   /* 覆盖层的样式*/
         .mybg{
          background:#B6B6B6;
    width:"100%";
    height:"100%";
    top:"0";
    left:"0";
    position:absolute;
    z-index:500;
    opacity:0.3;
    overflow:hidden;
    filter:"Alpha(opacity=30)"
         }
   
   /* 弹出层的总区域*/   
   .div_area{
    position: absolute;
    left: 54px;
    top: 103px;
    width: 500px;
    height: 350px;
    filter: dropshadow(color=#666666,
     offx=3,offy=3,positive=2);
    z-index: 1000;
   }
   
   /* 弹出层的内容区域*/
   .div_context{
    border:#036 solid; 
    border-width:1 1 3 1;
    width:95%;
    height:95%;
    background:#F5F5F5;  
    color:#036;  
    font-size:12px; 
    line-height:150%;   
   }
   /* 弹出层的标题区域*/
   .div_title{
    background:#666; 
    height:15px;
    font-family:Verdana,Arial,
    Helvetica,  sans-serif; 
    font-size:14px;  
    padding:3 5 0 5;  
    color:#FFF
    
   }
   .close_btn{
    float:right;
    cursor:hand;
    font-size:150% 
   
   }
   
   
        
        </style>
        
        
    </head>
<script type="text/javascript">
  $(document).ready(function(){
   
    //弹出层按钮方法测试
    $("#ok").click(function(){    
     alert($(this).attr("value")); 
    });
    
    
    $("#show_div").click(function(){    
     $("#mybg").show();   
     $("#message_box").css({ "position": "absolute",
          "left":$(this).offset().left+15+"px", 
          "top": $(this).offset().top+25+"px",
          "width": "500px",
          "height": "350px",
          "filter": "dropshadow(color=#666666,offx=3,offy=3,positive=2)",
          "z-index": "1000"
      });
     $("#message_box").show(300);
   
   
   });
    
   
   $("#mybg").hide();
   $("#message_box").hide();
   });
  
  
 
 
  function closeMsg(){
   $("#message_box").hide(300);
   $("#mybg").hide();
   $("#result").html($("#price").html());
  }
  

 </script>
<body>
   
   <table width="60%" border="1">
     <tr>
      <td width="15%">物料编号</td>
            <td width="30%">物料描述</td>
            <td width="10%">交货数量</td>
            <td width="20%"> 获取推荐信息</td>
     </tr>
     <tr>
       <td>101662</td>
       <td>徐重1250</td>
       <td>50</td>
       <td><input type="button" value="获取推荐信息"  id="show_div"  /></td>
     </tr>
   
   
   </table>
   <!-- 覆盖背景的层-->
<div id="mybg" class="mybg"></div>

 <!--弹出层 -->
    <div id="message_box" class="div_area" >
        <div id= "message" class="div_context" >
            <!-- DIV弹出状态行：标题、关闭按钮 -->
          <div  class="div_title">
            <table width="100%">
             <tr>
                 <td>标题项</td>
                    <td>
                     <span onClick="closeMsg();" class="close_btn">×</span>
                    </td>                
                </tr>
            </table>
              
             
            </div>
            <span>
            <table width="80%" border="1" id="show1" >
              <tr>
                <td width="15%">库位</td>
                <td width="20%">仓位</td>
                <td width="15%">数量</td>
                <td width="30%">日期</td>
                <td width="20%">选中</td>
              </tr>
              <tr>
                <td>0011</td>
                <td>A1BC2</td>
                <td>1</td>
                <td>2012-07-01</td>
                <td><input type="checkbox" name="checkbox2" id="checkbox2"></td>
              </tr>
              <tr>
                <td>0011</td>
                <td>A1BC1</td>
                <td><span id="price"> 1</span></td>
                <td>2012-07-02</td>
                <td><input type="checkbox" name="checkbox" id="checkbox"></td>
              </tr>
            </table>  
            
            
            </span>
            
            
        </div>
    </div>
</body>
</html>
posted on 2012-07-13 15:45 babyblue 阅读(620) 评论(0) 收藏举报