css:

.upload-img{width:80%;position:fixed;top:50%;left:50%;margin-left:-40%;background-color:#fff;border-radius:10px;z-index:1000;display:none;}.upload-img>p:first-child{height:50px;line-height:50px;border-bottom:2pxsolid#ccc;padding:020px;font-size:2.2rem;}#open-picture,#open-camera{height:40px;line-height:40px;padding:020px;font-size:2rem;cursor:pointer;}#open-picture{border-bottom:1pxsolid#ccc;}.mask{background:#000;opacity:0.8;width:100%;height:100%;z-index:999;position:fixed;top:0;left:0;display:none;}#picture,#camera{position:absolute;top:0px;left:0px;width:100%;height:100%;margin:0px;opacity:0;filter:"alpha(opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;}

html:

<p><imgsrc="默认显示图片的路径地址"id="img"></p><formaction=""id="upload-img"runat="server"method="post"enctype="multipart/form-data"><divclass="upload-img"><p>上传照片</p><div><pid="open-picture"><spanclass="glyphiconglyphicon-picturerMar10"></span>相册</p><inputtype="file"name="picture"capture="camera"id="picture"/></div><div><pid="open-camera"><spanclass="glyphiconglyphicon-camerarMar10"></span>拍照</p><inputtype="file"name="camera"accept="p_w_picpath/*"id="camera"/></div></div></form>

js:

$("#img").click(function(){$(".upload-img").show();$(".mask").show();});$(".mask").click(function(){$(".mask").hide();$(".upload-img").hide();});