jQuery scroll AFTER CSS更改

Question

我構建了一些使用CSS顯示的模式窗口。但是，它們顯示在頁面的頂部，而不是頂部的窗口。我會讓事情得到解決，但有時模式窗口很長，需要是絕對的，因此您可以在模式框中滾動瀏覽並閱讀更長的信息。

爲了解決這個問題，我想：

• 要麼寫一些jQuery的最高滾動到頁面的頂部，
• 或找到 一種方法，使模態出現在頂部窗口（而不是 的頁面）。

這裏有一個的jsfiddle給你看什麼我的工作： https://jsfiddle.net/4f4qa1w5/4/

和代碼，如果你想在這裏看到：

$(".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>

Answer 1

看來問題是標記有這樣被搞亂了我的class和id選擇一些未關閉的div的。

退房的小提琴：https://jsfiddle.net/egzfa3x5/4/

Answer 2

以下是解決問題的技巧。

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

Answer 3

這僅是一個潛在的局部回答另一個問題：

你如何使用此解決方案（https://jsfiddle.net/717pnpwj/）與多個ID？

查看multi id JS小提琴：[Link removed。見下文]

我知道下面的代碼不能正常工作，但也許它更接近一個多id解決方案：

$(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"); 
    }) 
}) 

注意：問題是在標記了。退房的答案上方和小提琴：https://jsfiddle.net/egzfa3x5/4/