移动端上传图片时弹窗浏览并删除JQUERY+CSS3

移动端上传图片时弹窗浏览并删除JQUERY+CSS3

移动端上传图片时弹窗浏览并删除JQUERY+CSS3* { margin: 0px; padding: 0px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); box-sizing:border-box; -webkit-box-sizing:border-box; }body { margin: 0px; padding: 0px; font-family: 'Microsoft Yahei'; font-size: 12px; color: #333; height:100%;  position: relative; background-color:#f1f1f1; -webkit-text-size-adjust: none;}ul, li, p, span, h1, h2, h3, h4, dl, dt, dd, form, input, textarea, select { margin: 0px; padding: 0px; }input, textarea, select { color: #666;font-family: 'Microsoft Yahei'; }i { display: inline-block; font-style:normal; }*:focus { outline: none }img { border: 0px; max-width:100%; }ul, li { list-style-type: none; }a:link, a:visited, a:active { color: #333; text-decoration: none; border: none; outline: none; }a:hover { color: #48d8e2; }/***CSS***/.pdbox{ padding:12px; overflow:hidden; max-width:320px; margin:0 auto;}.pic{ overflow:hidden; margin-left:-5px; margin-top:10px;}.pic a{ width:20%; padding-left:5px; float:left;}.pic a img{ width:100%; height:55px;}/***上传图片时点击图片放大并显示删除按钮***/.showpic{ position:fixed; left:0px; top:0px; width:100%; height:100%; background:#000; transition:all .4s; -webkit-transition:all .4s; z-index:11111; text-align:center; display:table; opacity:0; transform:scale(0); transform:scale(0);}.showpic ul{ display:table; position:absolute; left:0px; right:0px; width:100%; height:100%; z-index:1; }.showpic ul li{ position:absolute; left:0px; width:100%; opacity:0; transform:scale(0) translateY(-50%); -webkit-transform:scale(0) translateY(-50%); transition:all .3s; -webkit-transition:all .3s; top:50%;}.showpic ul li img{max-width:100%; max-height:80%;}.showpic ul li.on{ opacity:1; transform:scale(1) translateY(-50%); -webkit-transform:scale(1) translateY(-50%);}.showpic .icondel{ position:absolute; right:12px; bottom:12px; width:25px; z-index:1111;}.showpic .icoreturn{ position:absolute; left:12px; bottom:12px; width:25px; z-index:1111;}.showpic .icoreturn.btnl{ bottom:50%;}.showpic .icoreturn.btnr{ bottom:50%; left:inherit; right:12px; transform:rotate(180deg);}.showpic.on{ opacity:1;transform:scale(1); transform:scale(1);}