Modale Fenster, das übernimmt der browser die scrollbar wie auf Pinterest

Habe ich ein modal-Fenster, die Anzeige von Inhalten mehr, dass der browser-Fenster-Höhe, so brauche ich zum erstellen eines modalen Fensters, das übernimmt der Browser die scrollbar wie die, die wir sehen, auf Pinterest. Außerdem, ein Klick auf das Bild Ursache das Bild zu übersetzen, wo Sie in das modale Fenster.

Hinweis, wie das öffnen von modalen Veränderungen der Scrollbalken

Modale Fenster, das übernimmt der browser die scrollbar wie auf Pinterest

Problem: Wie kann ich die gleichen modal-Fenster (übernimmt scrollbar) und die animation von dem Bild? Ich weiß, dass die URL in der Adresszeile ändert sich, wenn das modale Fenster angezeigt, aber Sie werden feststellen, dass die Seite nicht wirklich ändern. Ich bin in der Lage, dies zu tun mit backbone.js also keine sorgen.

HTML-Code

<div id="showModal">Click me!</div>

<div class="modal">
    <div class="modal_item">
        <div class="modal_photo_container">
            <img src="img/posts/original/1019_bb8f985db872dc7a1a25fddeb3a6fc3c43981c80.jpg" class="modal_photo">
        </div>
    </div>
</div>

JS-Code

$('#showModal').click(function() {
    $('.modal').show();
});

InformationsquelleAutor Nyxynyx | 2012-07-10

  1. 22

    Erste, würde ich vorschlagen, eine html-Struktur für Ihre modalen ähnlich:

        <div class="modal-container">
        <div class="modal">
        </div>
    </div>

    Dann auf 'click', Sie würde hinzufügen overflow:hidden zu body, und irgendwie hinzufügen display:block zu .modal-container. .modal-container hätte die entsprechenden css:

    .modal-container {
   display: none;
   overflow-y: scroll;
   position: fixed;
   top: 0; right: 0;
   height: 100%; width: 100%; 
}

    Werfen Sie einen Blick auf ein Beispiel an http://jsfiddle.net/joplomacedo/WzA4y/

    InformationsquelleAutor banzomaikaka

Schreibe einen Kommentar