jQuery scroll ПОСЛЕ изменения 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

Кажется, проблема была разметка была несколько незакрытых div о том, что были Мессинг моих class и id выбора.

Заканчивать скрипку: 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/) с несколькими идентификаторами?

См. Многодисковый скрипт JS: [Ссылка удалена. Смотрите ниже]

Я знаю, что ниже код не работает, но, возможно, это ближе к мульти- 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"); 
    }) 
}) 

ПРИМЕЧАНИЕ: Проблема была в размечать. Проверьте ответ выше и Fiddle: https://jsfiddle.net/egzfa3x5/4/