图片删除弹出框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>测试</title> 5 <meta name="name" content="content" charset='utf-8'> 6 <link rel="stylesheet" type="text/css" href="reset.css"> 7 <script src='jquery-1.10.1.min.js'></script> 8 <style> 9 /*图片放大功能实现*/ 10 .managerinfo_image_big{ 11 position: fixed; 12 top:0; 13 width:100%; 14 height:100%; 15 background-color: rgba(0,0,0,.7); 16 display:none; 17 } 18 .managerinfo_image_box{ 19 margin:0 auto; 20 height:100%; 21 text-align: center; 22 } 23 .managerinfo_image_box>span{ 24 width:0; 25 height:100%; 26 display:inline-block; 27 vertical-align:middle; 28 } 29 .managerinfo_image_box>img{ 30 max-width:98%; 31 max-height:100%; 32 } 33 .managerinfo_image_box_que{ 34 position:fixed; 35 bottom:0; 36 height:7.65rem; 37 width:100%; 38 background-color: #f5f5f5; 39 display: none; 40 } 41 .managerinfo_image_box_que>a{ 42 display: block; 43 line-height: 2.25rem; 44 border-top:1px solid #ccc; 45 box-sizing: border-box; 46 } 47 .managerinfo_image_box_que>p, 48 .managerinfo_image_box_que>a{ 49 font-size: .7rem; 50 color:#666; 51 text-align: center; 52 } 53 .managerinfo_image_box_que>p{ 54 line-height: 3.25rem; 55 } 56 .managerinfo_image_box_que>a.managerinfo_image_box_que_submit{ 57 color:#ff6666; 58 } 59 .managerinfo_image_box_c{ 60 position: fixed; 61 top:0; 62 width:100%; 63 line-height: 1.5rem; 64 box-sizing: border-box; 65 padding: .5rem .3rem; 66 } 67 .managerinfo_image_box_c>p{ 68 text-align: right; 69 display: inline-block; 70 } 71 .managerinfo_image_box_c i{ 72 float:right; 73 width:.8rem; 74 height:.85rem; 75 margin-top:.325rem; 76 background: url(6.jpg) no-repeat -3.25rem 0; 77 background-size: 4.175rem 1.5rem; 78 } 79 .managerinfo_image_box_c span{ 80 color:#fff; 81 font-size: .55rem; 82 line-height: .8rem; 83 margin-right: .25rem; 84 } 85 .wrap-reply{ 86 text-align: center; 87 } 88 </style> 89 </head> 90 <body> 91 <script src='rem.js'></script> 92 <div class="wrap-reply wrap-reply-wait clearfix" data-role="courtimg"> 93 <div class="img-uploader"> 94 <div class="img-uploader-box img-uploader-box-wait"> 95 <img src="banner.jpg" class="active"> 96 <div class="img-uploader-btn-ap"> 97 <!-- <i class="icon-plus"></i> 请上传 --> 98 </div> 99 <!-- <input class="input-file" type="file"> --> 100 </div> 101 <input type="hidden" name="courtimg" value=""> 102 <!--<p class="tac">截图</p>--> 103 </div> 104 </div> 105 106 <!--图片放大功能实现--> 107 <div class="managerinfo_image_big"> 108 <div class="managerinfo_image_box"> 109 <span></span> 110 <img src="" alt=""/> 111 </div> 112 <div class="managerinfo_image_box_c"> 113 <p><span>删除照片</span><i></i></p> 114 </div> 115 <div class="managerinfo_image_box_que"> 116 <p>确定要删除这张照片吗？</p> 117 <a class="managerinfo_image_box_que_submit" href="javaScript:;">删除</a> 118 <a class="managerinfo_image_box_que_bottom" href="javaScript:;">取消</a> 119 </div> 120 </div> 121 <script> 122 $(document).ready(function(){ 123 var manager_img=""; 124 $(".wrap-reply-wait").on('click',"img",function(){ 125 $(".managerinfo_image_big").fadeIn(); 126 $(".managerinfo_image_box").children("img").attr("src",$(this).attr("src")); 127 manager_img=$(this).parent().parent(); 128 }) 129 $(".managerinfo_image_box").on("click",function(e){ 130 $(this).parent().fadeOut(); 131 }) 132 $(".managerinfo_image_box_c").on("click",function(){ 133 $(".managerinfo_image_box_que").fadeIn(); 134 }) 135 $(".managerinfo_image_box_que_submit").on("click",function(){ 136 $(this).parent().parent().css("display","none"); 137 manager_img.remove(); 138 $(".managerinfo_image_box_que").css("display","none"); 139 //var src=$(this).parent().siblings(".managerinfo_image_box").children("img").attr("scr"); 140 }) 141 $(".managerinfo_image_box_que_bottom").on("click",function(){ 142 $(".managerinfo_image_box_que").css("display","none"); 143 }) 144 $('.reply-more-btn').on('click', function(event) { 145 $(this).next().fadeIn(); 146 $(this).remove(); 147 }); 148 }); 149 </script> 150 151 </body> 152 </html>
js
function resetFontSize(){ $('html').css('font-size', $('body').width()/16); } resetFontSize(); $(window).resize(function(){ resetFontSize(); });
css
/* `XHTML, HTML4, HTML5 Reset ----------------------------------------------------------------------------------------------------*/ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0; } html, body { height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { /* Override the default (display: inline) for browsers that do not recognize HTML5 tags. IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv */ display: block; } b, strong { /* Makes browsers agree. IE + Opera = font-weight: bold. Gecko + WebKit = font-weight: bolder. */ font-weight: bold; } img { color: transparent; font-size: 0; vertical-align: middle; /* For IE. http://css-tricks.com/ie-fix-bicubic-scaling-for-images */ -ms-interpolation-mode: bicubic; } ul { list-style: none; } li { /* For IE6 + IE7: "display: list-item" keeps bullets from disappearing if hasLayout is triggered. */ display: list-item; } table { border-collapse: collapse; border-spacing: 0; } th, td, caption { font-weight: normal; vertical-align: top; text-align: left; } q { quotes: none; } q:before, q:after { content: ""; content: none; } sub, sup, small { font-size: 75%; } sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } svg { /* For IE9. Without, occasionally draws shapes outside the boundaries of <svg> rectangle. */ overflow: hidden; } i{ display: inline-block; font-style: normal; } strong,b{ font-weight: normal; }
ps：图片自己添加；jq自己添加
效果图：
