jQuery blättern NACH CSS Änderung

Ich habe einige modale Fenster erstellt, die mit CSS angezeigt werden. Allerdings sind sie bei der oben auf der Seite, anstatt der oben im Fenster angezeigt. Ich würde die Dinge fixieren, aber manchmal ist das modale Fenster lang und muss absolut sein, so dass Sie durch die modale Box scrollen und längere Informationen lesen können.jQuery blättern NACH CSS Änderung

Um dies zu beheben Ich mag würde zu:

entweder einige jQuery schreiben Sie an die oben auf der Seite, um nach oben,
oder einen Weg finden, die modalen an der Spitze erscheinen lassen von das Fenster (anstatt der Seite).

Hier ist ein JSFiddle für Sie sehen, was mit ich arbeite: https://jsfiddle.net/4f4qa1w5/4/

und der Code, wenn Sie es möchten, hier sehen:

$(".modal-container").css("display") == "block", function() { 
 
    $("html, body").animate({ scrollTop: 0 }, 300); 
 
    return false; 
 
};

.modal-container { 
 
    position: absolute; 
 
    max-width: 500px; 
 
    background: #fff; 
 
    padding: 20px; 
 
    border-radius: 5px; 
 
    left: 50%; 
 
    transform: translate(-50%); 
 
    display: none; 
 
} 
 
.modal-container img { 
 
    width: 100%; 
 
} 
 
.modal:before { 
 
    content: ""; 
 
    position: fixed; 
 
    display: none; 
 
    background-color: rgba(0,0,0,.8); 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.modal:target:before { 
 
    display: block; 
 
} 
 
.modal:target .modal-container { 
 
    top: 125px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
<a href="#listen"> 
 
    <h2>Click to Listen</h2> 
 
</a> 
 
<div class="modal" id="listen"> 
 
    <div class="modal-container album-modal"> 
 
    <div class="close"><a class="red-it" href="#">X</a></div> 
 
    <br> 
 
    </div>

Quelle

2016-09-21 Sam Granger

Es scheint, das Problem war das Markup einige unclosed div ‚s hatte, dass meine class und id Selektionen wurden vermasselt.

Schauen Sie sich die Fiddle: https://jsfiddle.net/egzfa3x5/4/

Quelle

2016-09-28 23:53:04

Hier ist der Trick, um Ihr Problem zu lösen.

JQuery

$(function(){ 
    $("#trigger").click(function(){ 
    $(".modal").css("display","block"); 
    $(".modal").css("overflow-y","auto"); 
    $("body").css("overflow","hidden"); 
    $(".modal-container").css("display","block"); 
    $("html, body").animate({ scrollTop: 0 }, "slow");// 
    return false;// 
    }) 
}) 


$(function(){ 
    $(".close").click(function(e){ 
    e.preventDefault(); 
    $(".modal").css("display","none"); 
    $(".modal").css("overflow-y",""); 
    $("body").css("overflow",""); 
    window.location.hash = $("#trigger").attr("id"); 
    }) 
})

DEMO

Quelle

2016-09-21 23:04:37 Fiido93

Dies ist eine wirklich effiziente Lösung, aber es löst nicht das Problem. Dies funktioniert, solange das modale Fenster nicht länger als das Ansichtsfenster ist. Aber meine modalen Fenster haben oft Pop-ups, die länger sind als das Fenster (ca. 7 lorem p sind für ein Beispiel hinzufügen). Wie kann ich es so machen, dass ich sie immer noch runterscrollen kann? –

@SamGranger Ich füge bereits etwa 7 Lorem hinzu. es kann immer noch herunterscrollen. kannst du das Layout zeichnen? lol – Fiido93

Dies ist ein krasses Beispiel von dem, was ich suche: https://jsfiddle.net/8ccf8877/ (natürlich würde ich nicht in einem modalen, dass viele Informationen haben, aber immer noch ...) Nun wäre diese Lösung funktioniert ganz gut, wenn ich nur den schwarzen Hintergrund von .modal bekommen könnte, um alles abzudecken. Irgendwelche Vorschläge dazu @ Fiido93? –

Dies ist nur eine potentiell teilweise Antwort auf eine weitere Frage:

Wie verwenden Sie diese Lösung (https://jsfiddle.net/717pnpwj/) mit mehreren IDs?

Siehe die Multi ID JS Fiddle: [Link entfernt. Siehe unten]

Ich weiß, dass der folgende Code nicht funktioniert, aber vielleicht ist es näher an eine multi- id Lösung:

$(function(){ 
    $("[id$=-open]").click(function(){ 
    var id = this.id; 
    var targetId = id.replace('-open',''); 
    var $target = $('#' + targetId); 
    $($target).css("display","block"); 
    $($target).css("overflow-y","auto"); 
    $("body").css("overflow","hidden"); 
    $($target > ".modal-container").css("display","block"); 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
    }) 
})

Hinweis: das Problem in dem Aufschlag war. Schauen Sie sich die Antwort oben und der Fiddle: https://jsfiddle.net/egzfa3x5/4/

Quelle

2016-09-28 20:22:24

jQuery blättern NACH CSS Änderung

Antwort

Verwandte Themen