lima-city: Webhosting, Domains und Cloud
1 Pluspunkt 0 Minuspunkte

Wenn man auf einen Link klickt öffnet sich ein Modal Window. Hier ist das HTML

<div id="hitModal" class="modal" style="display: none;">
    <div class="modal-content">
        <span onclick="closeModal()" class="close">&times;</span>
        <pre id="hitJson"></pre>
    </div>
</div>

und hier das CSS

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    overflow:scroll;
}
.close {
    float: right;
    font-size: 28px;
    cursor: pointer;
}

Was stört ist das der Link zum schliessen beim scrollen mitscrollt. Wie kann ich den oben rechts behalten auch wenn man im Modal Content scrollt?

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Du musst den "modal-content" unterteilen in "header" und "body". Hier ist das angepasste Markup für das modal Window. 

<div id="hitModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span>Event Details</span>
            <span onclick="closeModal()" class="close">&times;</span>
        </div>
        <div class="modal-body">
            <pre id="hitJson"></pre>
        </div>
    </div>
</div>

Hier das neue CSS

.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: white;
    margin: 10% auto;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background-color: #0078D7;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.modal-body {
    max-height: 400px;
    overflow-y: auto;
    padding: 15px;
    background-color: #f5f5f5;
    white-space: pre-wrap;
    font-family: monospace;
}

.close {
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
}

Deine Javascript Funktion musst du evtl an die neuen CSS Selektoren anpassen.

von (397 Punkte)  
Diese Community basiert auf dem Prinzip der Selbstregulierung. Beiträge werden von Nutzern erstellt, bewertet und verbessert – ganz ohne zentrale Moderation.

Wer hilfreiche Fragen stellt oder gute Antworten gibt, sammelt Punkte. Mit steigender Punktzahl erhalten Mitglieder automatisch mehr Rechte, zum Beispiel

  • Kommentare verfassen
  • Beiträge bewerten
  • Inhalte bearbeiten
  • Inhalte ausblenden

So entsteht eine Plattform, auf der sich Qualität durchsetzt – getragen von einer engagierten Gemeinschaft. Unser Ziel: Guter Inhalt. Für alle.

2.3k Fragen

2.8k Antworten

255 Kommentare

11 Nutzer