Всплывающее окно вверх со дна, переполняющего другие блоки div

Question

Я пытаюсь сделать всплывающее окно вверх при нажатии на ссылку. Я подготовил пример с элементами вокруг всплывающего окна при этом LINK

Есть 2 блоков (блок и нижние колонтитулы}:

<div id="block"> 
    Some content inside the block. 
</div> 

<div id="Popup"> 
    <div class="Container"> 
    <div id="tmp"> Popup! 
     <span id="close">X</span> 
    </div> 
    </div> 
</div> 

<div id="footer"> 
    <span id="FooterLink">Link</span> 
</div> 

Между ними, как вы можете увидеть, есть мое скрытый всплывающее окно, которое я хотел бы показать чуть выше блока нижнего колонтитула. При нажатии ссылки в области нижнего колонтитула всплывающее окно должно медленно перемещаться над нижним колонтитулом, переполняющим блок над нижним колонтитулом. Мое всплывающее окно должно иметь динамическую высоту из-за различного содержимого внутри в зависимости от язык выбран пользователем. Извините за мой английский, надеюсь, кто-то может мне помочь. Я нашел здесь пример LINK, как это должно быть wo rk (кроме кнопки clients - мой нижний колонтитул, и у меня может быть только всплывающее окно с абсолютной позицией или z-index, поэтому я не могу использовать этот пример).

Остальная часть кода: CSS:

#block { 
    height: 150px; 
    color: #FFF; 
    background-color: #505050; 
    text-align: center; 
} 

#Popup { 
    display: none; 
    position:absolute; 
    z-index: 100; 
    background-color: red; 
    width: 100%; 
    min-height: 60px; 
} 
#close { 
    width: 20px; 
    margin-left: 100px; 
    cursor: pointer; 
} 


#footer { 
    height: 50px; 
    background-color: blue; 
    color: white; 
    text-align: center; 
} 
#FooterLink { 
    cursor: pointer; 
} 

JS:

$('#FooterLink').click(function() { 
    $('#Popup').slideToggle(); 
}); 
$('#close').click(function() { 
    $('#Popup').slideToggle(); 
}); 

Answer 1

Там же много способов, вы могли бы выполнить эту задачу. Я сделал, чтобы обернуть ваши footer и popup элементами под одной оберткой div. Это помогает размещать и оживлять свои позиции по отношению друг к другу. Я также завернул всю коробку в один div и назвал ее box.

footer-container имеет высоту, равную и footer элемент. Когда вы нажимаете на кнопку, применяется bottom со значением высоты элемента, а так как popup позиционируется абсолютно, он будет анимироваться вверх.

Снятие bottom: 60px снова скрывает элемент.

Эта реализация обеспечивает динамическую высоту элемента popup.

Fiddle

$('#FooterLink').click(function() { 
 
    $('#Popup').animate({ 
 
    top: -$("#Popup").height() 
 
    }); 
 
}); 
 
$('#close').click(function() { 
 
    $('#Popup').animate({ 
 
    top: 0 
 
    }); 
 
});

#test { 
 
    display: inline-block; 
 
} 
 
#block { 
 
    height: 150px; 
 
    color: #FFF; 
 
    background-color: #505050; 
 
    text-align: center; 
 
} 
 
#Popup { 
 
    position: absolute; 
 
    z-index: 0; 
 
    background-color: red; 
 
    width: 100%; 
 
    min-height: 60px; 
 
} 
 
#close { 
 
    width: 20px; 
 
    margin-left: 100px; 
 
    cursor: pointer; 
 
} 
 
#footer-container { 
 
    position: relative; 
 
    height: 60px; 
 
} 
 
#footer { 
 
    position: relative; 
 
    z-index: 100; 
 
    height: 60px; 
 
    background-color: blue; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
#FooterLink { 
 
    cursor: pointer; 
 
} 
 
#box { 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="block"> 
 
    Some content inside the block. 
 
</div> 
 
<div id="footer-container"> 
 
    <div id="Popup"> 
 
    <div class="Container"> 
 
     <div id="tmp">Popup! 
 
     <span id="close">X</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="footer"> 
 
    <span id="FooterLink">Link</span> 
 
    </div> 
 
</div>

Answer 2

Вам просто нужно изменить вы Css #Popup позиция в relative

Попробуйте это решение

$('#FooterLink').click(function() { 
 
    $('#Popup').show(2000); 
 
}); 
 
$('#close').click(function() { 
 
    $('#Popup').hide(2000); 
 
});

#block { 
 
    height: 150px; 
 
    color: #FFF; 
 
    background-color: #505050; 
 
    text-align: center; 
 
} 
 

 
#Popup { 
 
    display: none; 
 
    position:relative; 
 
    z-index: 100; 
 
    background-color: red; 
 
    width: 100%; 
 
    min-height: 60px; 
 
} 
 
#close { 
 
    width: 20px; 
 
    margin-left: 100px; 
 
    cursor: pointer; 
 
} 
 

 

 
#footer { 
 
    height: 50px; 
 
    background-color: blue; 
 
    color: white; 
 
    text-align: center; 
 
} 
 
#FooterLink { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="block"> 
 
    Some content inside the block. 
 
    </div> 
 
    
 
    <div id="Popup"> 
 
\t \t <div class="Container"> 
 
\t \t \t \t <div id="tmp"> Popup! 
 
      <span id="close">X</span> 
 
     </div> 
 
\t \t </div> 
 
\t </div> 
 
    
 
    <div id="footer"> 
 
    <span id="FooterLink">Link</span> 
 
    </div>