Question

我构建了一些使用CSS显示的模态窗口。但是，它们会显示在页面顶部，而不是窗口顶部。我会修复一些问题，但有时模态窗口很长，需要是绝对的，所以你可以在模态框中滚动浏览并阅读更长的信息。

为了解决这个问题，我想：

要么写一些jQuery来向上滚动到页面顶部，
或者找到一种使模态出现在窗口顶部的方法（而不是页面）。

这里有一个JSFiddle，供您查看我正在使用的内容： https://jsfiddle.net/4f4qa1w5/4/

代码如果您想在此处查看：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这是解决问题的诀窍。

<强> 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 2

这只是对另一个问题的潜在部分答案：

如何将此解决方案（https://jsfiddle.net/717pnpwj/）与多个ID一起使用？

查看多id JS Fiddle：[已删除链接。见下文]

我知道下面的代码不起作用，但也许它更接近于多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/

Answer 3

似乎问题是标记有一些未公开的class，它们弄乱了我的id和react-native run-ios选项。

查看小提琴：https://jsfiddle.net/egzfa3x5/4/

CSS改变后的jQuery滚动

3 个答案: