div弹出层

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="com.svv.dms.web.util.HIUtil" %>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta charset="utf-8" />
<title></title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" type="text/css" href="../../doc/css/style.css" />
<script src="../../doc/js/jquery-1.8.3.min.js"></script>
<style type="text/css">


</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden}
body{height:100%;overflow:auto}
#MyDiv{position:absolute}
</style>
<![endif]-->
<script type="text/javascript">
 $(document).ready(function(){
      //弹出修改上架下架窗口
           $("ul li").click(function(){
                  var data = $(this).text();
                var datap=""+data;
    
                    ShowDiv('MyDiv','fade');

          });
 
 });
//弹出隐藏层
    function ShowDiv(show_div,bg_div){
    

        document.getElementById(show_div).style.display='block';
        document.getElementById(bg_div).style.display='block' ;
        
        document.getElementById("price").value="";
        document.getElementById("goodsName").innerHTML="";
        document.getElementById("gunit").innerHTML="";
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
        // bgdiv.style.height = $(document).height();
        $("#"+bg_div).height($(document).height());
    };
    //弹出隐藏层
    function ShowDivG(show_div,bg_div){
        document.getElementById(show_div).style.display='block';
        document.getElementById(bg_div).style.display='block' ;
        
        document.getElementById("goodsName_div").innerHTML=goodsName;
        document.getElementById("goodsName_div_up").innerHTML=goodsName;
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
        // bgdiv.style.height = $(document).height();
        $("#"+bg_div).height($(document).height());
    };
    //关闭弹出层
    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    };
    </script>
</head>
<body>
<div id="container">

<!-- header start -->
<div class="header" id="header" style=" background-color:#8CBF4E;">
<div  style="width:90px;height:10px; disable:true;"></div>
<table  width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:5px;" >
    <tr>
        <td align="center"> <a href="#" οnclick="refresh();">刷新</a></td>
        <td align="center"><span id = "main" style="color:#fff;">我的仓库</span></td>
        <td align="center"><a href="#" >添加</a></td>
    </tr>
</table>
<!-- search start -->
<div class="search" style="margin-top:12px;">
         <div style="width:15px;height:36px;float:left;" id="search-left"></div><input type="text" class="box" name="s" id="search" class="inputText" placeholder="搜索" x-webkit-speech>
         <img src="./doc/images/search_show_icon_new.png" style="width:20px;height:20px;"  οnclick="search();"/>
        <!--    <button class="btn" title="SEARCH" οnclick="search();"> </button>-->
</div>
<!-- search end -->
</div>
<!-- header end -->

<!-- goods list -->
<div class="pdtList"style="margin-top:78px;"  >
<ul class="list" id="myul">
    <li>
    <div class="img"><a><span style="display:none;" >123</span><img src="./doc/images/p_empty.png" style="width:100px;"/></a></div>
    <div class="cnt" ><p>白菜</p></div><span class="rmbIcon" οnclick="ShowDiv('MyDiv','fade')"><strong class="Prc">26</strong><span style="display:none;" >bais</span></span>
    </li>
            
            
</ul>
</div>
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay" >
</div>
<div id="zp" style="width:100%;"></div>
<div id="MyDiv" class="white_content" >
    
    <div style="margin-top:5px;">
    <center>   
        <div ><span id="goodsName" style="color:#8CBF4E;font-size:18px;"></span></div>
        
        <div style="margin-top:5px;margin-bottom:5px;"> <input type="text" style="font-size:20px;width:80%;" id="price" onclick = "changeCss();" placeholder="价格" /><span id="gunit" style="font-size:16px;">元/斤</span></div>
        <table>
            <tr>
                   <td ><input class="mele-button-midlle" style="height:30px;" type="button" value="保存" οnclick="saveGoods();" /></td>
                   <td ><input class="mele-button-midlle-wight" type="button"><input class="mele-button-midlle" type="button" value="取消" id="login" οnclick="CloseDiv('MyDiv','fade')" /></td>
            </tr>
        </table>
        
        </center>     
        
         <div  style="margin-top:5px;float:left;margin-right:3px;left:50%; position:absolute;">  </div>
         <div style="margin-top:5px;margin-left:3px;">
          </div>
       
    </div>
</div>



<!-- footer start -->
<div class="position" id="ff" >
<center>
<table  width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top:7px;margin-bottom:5px;">
    <tr>
        <td align="center"> <img src="./doc/images/b_tab_store_normal.png" style="width:35px;height:25px;"/></td>
        <td align="center"><img src="./doc/images/b_tab_orders_normal.png" style="width:35px;height:25px;"/></td>
        <td align="center"><img src="./doc/images/b_tab_home_normal.png" style="width:35px;height:25px;"/></td>
    </tr>
    <tr>
        <td align="center"><a href="#" >仓库</a></td>
        <td align="center"><a href="#" >订单</a></td>
        <td align="center"><a href="#" >我的</a> </td>
    </tr>
</table></center>
<div style="width:100%;height:40px;"></div>
</div>
 <!-- footer end -->
</div>
</body>
</html>


--------------------------------style.css---------------------------------

    body {
        margin:0;
        padding:0;
    }
    table td{
        font-size:18px;
    }
    #mid {
           
        margin-top:60dp;
        width:260px;
       
    }
    .loginForm {  
        
        z-index:0;
        border:none;  
        background-color:#FFF;
        margin-left:0dp;
        height:250px;
        width:190dp;
       
    }
    .loginForm:before {
        content:'';
         border:none;  
        position:absolute;
        z-index:-1;
        top:5px;
        bottom:5px;
        left:5px;
        right:5px;
        box-shadow: 0 0 0 1px #FFF;
        filter:alpha(opacity=0);
    }
    .loginForm h1 {
        text-transform:uppercase;
        text-align:center;
        color:#666;
        line-height:3em;
        margin:16px 0 20px 0;
        letter-spacing: 4px;
        font:normal 26px/1 Microsoft YaHei, sans-serif;
    }
    fieldset {
        border:none;
        padding:10px 10px 0;
    }
    fieldset input[type=text] {
        background:url(../../doc/images/login_id_icon.png) 4px 5px no-repeat;
        background-size:20px 20px;
    }
    fieldset input[type=password] {
        background:url(../../doc/images/login_pwd_icon.png) 4px 5px no-repeat;
         background-size:20px 20px;
    }
    fieldset input[type=text], fieldset input[type=password] {
        width:100%;
        line-height:2em;
        font-size:12px;
        height:24px;
        border:none;
        padding:3px 4px 3px 2.2em;
        width:200px;
    }
    fieldset input[type=button] {
        text-align:center;
        padding:2px 20px;
        line-height:2em;
        border:1px solid #8CBF4E;
        border-radius:3px;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9800', endColorstr='#FF6900')";
        height:30px;
        cursor:pointer;
        letter-spacing: 4px;
        color:#FFF;
        font-weight:bold;
    }
    fieldset input[type=button]:hover {
        background: -webkit-gradient(linear, left top, left 24, from(#FF9800), color-stop(0%, #FF6900), to(#FF9800));
        background: -moz-linear-gradient(top, #FF9800, #FF6900 0, #FF9800 24px);
        background:-o-linear-gradient(top, #FF6900, #FF6900 0, #FF9800 24px);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF6900', endColorstr='#FF9800')";
    }
    .inputWrap {
        background: -webkit-gradient(linear, left top, left 24, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
        background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
        background: -o-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 24px);
        border-radius:3px;
        border:1px solid #CCC;
        margin:10px 10px 0;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#FFFFFF')";
    }
    fieldset input[type=checkbox] {
        margin-left:10px;
        vertical-align:middle;
    }
    fieldset a {
        color:blue;
        font-size:12px;
        margin:6px 0 0 10px;
        text-decoration:none;
    }
    fieldset a:hover {
        text-decoration:underline;
    }
    fieldset span {
        font-size:12px;
    }
    .mele-parallax7 {
        background: #8CBF4E;
        background-repeat: no-repeat;
        background-size:cover;
           width: 230px;;
        min-height: 40px;
    }
    .mele-button-midlle {
        background: #8CBF4E;
        background-repeat: no-repeat;
        background-size:cover;
           width: 60px;
        min-height: 30px;
        color:#fff;
        border:0;
    }
    .mele-button-midlle-wight {
        background: #fff;
        background-repeat: no-repeat;
        background-size:cover;
           width: 10px;
        min-height: 30px;
        color:#fff;
        border:0;
    }
    A {text-decoration: none; color:#8CBF4E}
    
@charset "utf-8";

/**
FileName:        style.css
Version:         1.0.0(2010.09.01)
Website:         PS
Author:          Infinity arts vison,184586775@qq.com
Page Width:      1000px;
**/

/* CSS Document */


*{margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; width:100%; margin:0 auto; background:url(../bg/img2.jpg) no-repeat center 113px;}
html{ overflow-x:hidden;}
li,ol{list-style:none;}
a{text-decoration:none; cursor:pointer;}
a img{border:0;}
.clear{clear:both;}
h1, h2, h3, h4, h5, h6, p, span{font-weight:normal;}
i{font-style:normal;}

.header{
    width:100%;
     position:fixed;
     left:0px; top:0px;
     z-index:1001;
     background-color: #8CBF4E;

     margin-left:auto;
     margin-right:auto;
     background: url(../images/3x.png) repeat ;
     }
.header a,header a{ color:#FFF}
.position{width:100%; height:56px;  position:fixed; left:0px; bottom:0px; z-index:1001; background-color: #F0F0F0;}

.innerWrapper{ display:block; margin:0 auto; width:1000px; height:60px;position:relative;}

* html .position {position:absolute;bottom:0px;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

* html .position {position:absolute;top:0px;bottom:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    
    
/* 弹出框*/
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 40%;
left: 10%;
width: 80%;

border: 1px solid ;
background-color: white;
z-index:1002;
overflow: auto;
}
.white_content_small {
display: none;
position: absolute;
top: 30%;
left: 30%;
width: 40%;

border: 16px solid ;
background-color: white;
z-index:1002;
overflow: auto;
}

/*搜索框*/
.search {
    padding: 0px;
    border: none;
    background: #F0F0F0;
}



.search input, .search button {
    border: none;

}
.search input.box {
    height: 35px;
    width: 85%;
    margin-right: 0px;
    padding-right: 0px;
    background: #fff;
    margin: 1px;
}

.search button.btn {
    border: none;
    width:35px;
    height: 28px;
    margin: 0px ;
 
    background: url(../images/search_show_icon_new.png) no-repeat top right;
}
/*设置下架半透明*/
#gry{
filter:alpha(opacity=50);  /*支持 IE 浏览器*/
-moz-opacity:0.30; /*支持 FireFox 浏览器*/
opacity:0.30;  /*支持 Chrome, Opera, Safari 等浏览器*/

}

 .ibox{
    height: 35px;
   
    margin-right: 0px;
    padding-right: 0px;
    background: #fff;
    margin: 1px;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值