本文共 1947 字，大约阅读时间需要 6 分钟。
css：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | .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.2 rem; } #open-picture,#open-camera{ height : 40px ; line-height : 40px ; padding : 0 20px ; font-size : 2 rem; 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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < 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 style = "position:relative;" > < p id = "open-picture" >< span class = "glyphicon glyphicon-picture rMar10" ></ span >相册</ p > < input type = "file" name = "picture" capture = "camera" id = "picture" /> </ div > < div style = "position:relative;" > < p id = "open-camera" >< span class = "glyphicon glyphicon-camera rMar10" ></ span >拍照</ p > < input type = "file" name = "camera" accept = "image/*" id = "camera" /> </ div > </ div > </ form > |
js:
| 1 2 3 4 5 6 7 8 | $( "#img" ).click( function (){ $( ".upload-img" ).show(); $( ".mask" ).show(); }); $( ".mask" ).click( function (){ $( ".mask" ).hide(); $( ".upload-img" ).hide(); }); |