放置弹出式div而不影响其他div的位置

Question

I'm having troubles in making an image box(width:100%) similar to the one i have uploaded. 我在制作类似于我上载的图像框（宽度：100％）时遇到了麻烦。 The problem is that: I want an image box which contains diffrent images . 问题是：我想要一个包含不同图像的图像框。 They are displayed in "inline-block" attribute with fixed width and height.When I click on one image a div should popup(containing that image and occupying full width.)below the image without affecting the position of other images. 它们显示在固定宽度和高度的“内联块”属性中。当我单击一个图像时，div应该在图像下方弹出（包含该图像并占据整个宽度。）而不会影响其他图像的位置。 Please tell me how should i place the popup div below the image without affecting other images' position. 请告诉我如何在图片下方放置弹出式div，而又不影响其他图片的位置。

Imagebox with different images 具有不同图像的Imagebox

 body,html{ margin: 0; padding: 0; background-color: #ffffff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 18px; color: #a6a6a6; } .clear{ clear: both; } .searchBox{ width:100%; background-color: #e6e6e6; height: 50px; margin-top: 0; box-sizing: border-box; padding: 10px; position: relative; } .searchBox button{ border: none; max-width: 12%; min-height:40px; background-color: #e6e6e6; } .search{ float: left; } .settings,.edit,.dots{ float: right; } .search img, .settings img, .edit img, .dots img { width: 100%; height:100%; } .searchBox input[type=search]{ float: left; height: 30px; border: none; background-color: #e6e6e6; font-size: 16px; max-width: 50%; } .contentBox{ width: 100%; height: 80vh; overflow-y: scroll; } .box{ display: inline-block; max-width: 100px; max-height: 100px; margin: 5px; } .box img{ width: 100%; } #popup{ display:none; width:100%; height:auto; } #popup img{ width: 100%; height: auto; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <title>MediaValet</title> <link rel="stylesheet" type="text/css" href="css/styles3.css" > <script src="js/jquery-1.11.3.min.js"></script> <script> $(document).ready(function(){ var x = false; $('.box').on('click', function(){ if (!x){ $("#popup").show("slow").delay(500); x = true; } else { $("#popup").hide("slow").delay(500); x = false; } }); }); </script> </head> <body> <div class="medialibrary"> <div class="searchBox"> <button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button> </div> <div class="clear"></div> <p>Media Library</p> <div class="contentBox"> <div id="image1" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image2" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image3" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image4" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image5" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image6" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image7" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image8" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image9" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image10" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image11" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image12" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image13" class="box" > <img src="http://lorempixel.com/400/200/"> </div> <div id="image14" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image15" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="popup"><img src="http://lorempixel.com/400/200/"></div> </div> </div> </body> </html>

Answer 1

By making use of each image position top and ``left values we position the popup which has much higher z-index , also on clicking any of these image we take the src value of that image and in inject this value into the #popup img src to load that image into the popup 通过使用每个图像的top和左侧值，我们将定位具有较高z-index的弹出窗口，同时单击这些图像中的任何一个，我们将获取该图像的src值并将此值注入到#popup img src将该图像加载到弹出窗口中

Updated : now it is " responsive " and the whole set of rows below the popup shift down. 已更新 ：现在它是“ 响应式的 ”，弹出窗口下方的整个行向下移动。

JS : JS Fiddle JS ： JS小提琴

var imgs = $('.box img'),
        contBox = $('.contentBox'),
        popup = $('#popup');
imgs.each(function () {
    $(this).on('click', function (evt) {
        var $th = $(this),
            x = $th.position().left,
            y = $th.position().top,
            h = this.height,
            winW = $(window).width(),
            winH = $(window).height(),
            src = $th.attr('src'),
            a = 0,
            last = imgs.last(),
            shiftingDown = (winW/winH) * popup.height() - 5 * h,
            lastY = last.position().top;
            popup.detach();
            imgs.each(function (index) {
            var thY = $(this).position().top;
            if(thY > y){
                if(a == 0){
                    var nextRowFirstItem = $(this).parent();
                    popup.detach();
                    popup.children('img').attr('src',src);
                    popup.css({'display':'block'}).animate({'margin-top' : 0 });
                    popup.insertBefore(nextRowFirstItem);
                    $(this).parent().stop().animate({'margin-top' : shiftingDown});
                    a = 1;
                 }
            }else if( thY == lastY){
                popup.detach();
                popup.children('img').attr('src',src);
                popup.css({'display':'block', 'margin-top':'10px'}).animate({'margin-top' : 0 });
                contBox.append(popup); 
            }else{
                imgs.each(function (index) {
                    $(this).parent().stop().animate({'margin-top' : 0 });
                });
            }            
        });
    });
});
popup.children('#close').on('click', function (e) {
    e.preventDefault();
    popup.hide();
    imgs.each(function () {
        $(this).parent().animate({'margin-top' : "0" });
    });
});

Answer 2

Here is what you are expecting. 这就是您的期望。 Cheers! 干杯!

 body,html{ margin: 0; padding: 0; background-color: #ffffff; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 18px; color: #a6a6a6; height: 100%; position: relative; } .clear{ clear: both; } .searchBox{ width:100%; background-color: #e6e6e6; height: 50px; margin-top: 0; box-sizing: border-box; padding: 10px; position: relative; } .searchBox button{ border: none; max-width: 12%; min-height:40px; background-color: #e6e6e6; } .search{ float: left; } .settings,.edit,.dots{ float: right; } .search img, .settings img, .edit img, .dots img { width: 100%; height:100%; } .searchBox input[type=search]{ float: left; height: 30px; border: none; background-color: #e6e6e6; font-size: 16px; max-width: 50%; } .contentBox{ width: 100%; height: 80vh; overflow-y: scroll; } .box{ display: inline-block; max-width: 100px; max-height: 100px; margin: 5px; } .box img{ width: 100%; } #popup{ display:none; width:100%; height: 100%; position: absolute; background: rgba(0,0,0,0.7); top: 50%; margin-top: -25%; text-align: center; } #popup img{ width: 75%; height: auto; margin: -25% auto 0 auto; position: relative; top: 50%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function(){ var x = false; $('.box').on('click', function(){ if (!x){ $("#popup").show("slow").delay(500); x = true; } else { $("#popup").hide("slow").delay(500); x = false; } }); }); </script> <div class="medialibrary"> <div class="searchBox"> <button class="search"><img src="images/search-icon.png"></button> <input type="search" placeholder="Search.."></button><button class="dots"><img src="images/dots.png"></button><button class="settings"><img src="images/setting.png"> <button class="edit"><img src="images/edit.png"></button> </div> <div class="clear"></div> <p>Media Library</p> <div class="contentBox"> <div id="image1" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image2" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image3" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image4" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image5" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image6" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image7" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image8" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image9" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image10" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image11" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image12" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image13" class="box" > <img src="http://lorempixel.com/400/200/"> </div> <div id="image14" class="box"> <img src="http://lorempixel.com/400/200/"> </div> <div id="image15" class="box"> <img src="http://lorempixel.com/400/200/"> </div> </div> </div> <div id="popup"><img src="http://lorempixel.com/400/200/"></div>

Working jsfiddle 工作jsfiddle

放置弹出式div而不影响其他div的位置

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-11-18 05:27:36

解决方案2
0 2015-11-18 06:02:01

放置弹出式div而不影响其他div的位置

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-11-18 05:27:36

解决方案2 0 2015-11-18 06:02:01

解决方案1
0 已采纳 2015-11-18 05:27:36

解决方案2
0 2015-11-18 06:02:01