Popup-Folie von unten nach oben überläuft andere Div-Blöcke

Question

Ich versuche, ein Popup-Folie nach oben, wenn Sie auf den Link klicken. Ich habe ein Beispiel mit Elementen rund um das Popup unter diesem LINK

vorbereitet Es gibt 2 Blöcke (Block und Fußzeile}:

<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> 

Zwischen ihnen, wie Sie es sehen können, mein versteckt Popup ist, was ich Wenn Sie einen Link im Footer - Bereich drücken, sollte das Popup langsam über die Fußzeile über den Footer über den Footer gleiten .. Mein Popup sollte eine dynamische Höhe haben, da der Inhalt je nach Inhalt unterschiedlich ist Sprache wird vom Benutzer gewählt Sorry für mein Englisch, hoffentlich kann mir jemand dabei helfen Ich habe hier ein Beispiel gefunden LINK wie soll das gehen rk (außer der clients ist meine Fußzeile und ich kann nur Popup mit absoluter Position oder Z-Index haben, so dass ich dieses Beispiel nicht wirklich verwenden kann).

Der Rest des Codes: 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

Es gibt viele Möglichkeiten, wie Sie dies erreichen könnte. Was ich tat, war, Ihre footer und popup Elemente unter einer Verpackung div zu wickeln. Dies hilft beim Positionieren und Animieren ihrer Positionen in Bezug zueinander. Ich habe auch die ganze Box in ein div gehüllt und es box genannt.

Die footer-container hat eine Höhe, die dem und footer Element entspricht. Wenn Sie auf den Button klicken, wird bottom mit dem Wert der Elementhöhe angewendet und da der popup absolut positioniert ist, wird er nach oben animieren.

Durch Entfernen von bottom: 60px wird das Element wieder ausgeblendet.

Diese Implementierung ermöglicht eine dynamische Höhe des Elements 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

Sie einfach müssen Sie diese Lösung #Popup Position relative

Versuchen CSS ändern

$('#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>