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:

Wie eine
(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?

InformationsquelleAutor cytsunny | 2015-10-09
Schreibe einen Kommentar