Wie eine "schließen" - Symbol in der oberen rechten Ecke für das div mit scroll-Leiste?
Ich habe eine modal box selbst erstellt und ich möchte hinzufügen, eine schließen-Schaltfläche in der oberen rechten Ecke des modal-box. Ich will, dass es etwas außerhalb der modal-box. Wie diese:
(Entnommen aus diese Website)
Das Kreuz in der oberen rechten Ecke Hinzugefügt, mit css wie folgt:
#closeModal {
position:absolute;
top:-12px; /* Half the icon's height */
right:-12px; /* half the icon's width */
z-index:50;
}
Diese Arbeit, wenn das div-Element overlfow: visible;
Jedoch für meine modal box, die ich haben mehr Inhalt und ich möchte es werden scroll-in der Lage, wenn es mehr Inhalt. Also ich brauche, um das div zu sein overflow: auto;
Das Kreuz wird dann geschnitten.
Als die Breite der modal-box ist durch die pixel mit auto-center, putting das Kreuz außerhalb der modal-box und stellen Sie es position:fixed;
funktioniert nicht, da es keine Möglichkeit gibt, zu richten mit der modal-box.
Ein JSFiddle zeigt das problem
Gibt es also einen Weg, der "schließen" - Symbol, wie oben angegeben, während der Inhalt scroll-in der Lage?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Möchte ich einen extra-div, so : https://jsfiddle.net/no7wjhm2/3/.
Dem übergeordneten div nicht den overflow-parameter. Das Kind : overflow:hidden;
Legte ein wrapper um den Stil...
Hier ist eine einfache Lösung
- und css -
Encolse Ihren Modal-box in einem extra-wrapper
div
wie unten:CSS:
Fiddle: https://jsfiddle.net/no7wjhm2/5/ - Finden Sie den funktionierenden code hier