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

时间：2015-11-18 04:33:32

标签： javascript jquery html css

我在制作一个类似于我上传的图像框（宽度：100％）时遇到了麻烦。 问题是：我想要一个包含不同图像的图像框。它们以固定宽度和高度的“内联块”属性显示。当我单击一个图像时，应在图像下方弹出一个div（包含该图像并占据整个宽度。）而不影响其他图像的位置。 请告诉我如何将弹出窗口放在图像下方而不影响其他图像的位置。

具有不同图像的图像框

enter image description here 

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>

2 个答案:

答案 0 :(得分：0)

通过使用每个图像位置top和“左侧值”，我们定位具有更高z-index的弹出窗口，同时在点击这些图像中的任何一个时，我们取src值该图像并将此值注入#popup img src以将该图像加载到弹出窗口中

已更新：现在它是“响应”，弹出窗口下方的整行行向下移动。

JS ：JS Fiddle 

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" });
    });
});

答案 1 :(得分：0)

这是你所期待的。干杯！

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

工作jsfiddle

相关问题
最新问题