您好,登錄后才能下訂單哦!
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:2px solid #ccc; padding:0 20px; font-size: 2.2rem; } #open-picture,#open-camera{ height:40px; line-height: 40px; padding:0 20px; font-size: 2rem; cursor: pointer; } #open-picture{ border-bottom:1px solid #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><img src="默認顯示圖片的路徑地址" id="img"></p> <form action="" id="upload-img" runat="server" method="post" enctype="multipart/form-data"> <div class="upload-img"> <p>上傳照片</p> <div > <p id="open-picture"><span class="glyphicon glyphicon-picture rMar10"></span>相冊</p> <input type="file" name="picture" capture="camera" id="picture"/> </div> <div > <p id="open-camera"><span class="glyphicon glyphicon-camera rMar10"></span>拍照</p> <input type="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(); });
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。