Question

我希望在我的模态中向下/向上滚动而不是在体内。例如，如果我有文本框和标签，模态将向下滚动。 PS：模态正在发挥作用。

这是结构：

//script
<script>
$(document).ready(function(){
  $(".call_modal").click(function(){
  $(".modal").fadeIn();
  $(".modal").fadeIn();
  $(".modal_main").show();
  $(".text").show();
    });
});
$(document).ready(function(){
  $(".close").click(function(){
  $(".modal").fadeOut();
  $(".modal_main").fadeOut();
    });
});
</script>

//html
    <div class="modalcontainer">
        <a class="call_modal" style="cursor:pointer;">Show Modal</a>
        <div class="modal">
            <div class="modal_close close"></div>
            <div class="modal_main">
                <label>Enter Username:</label>
                <input type="text" name="text_username" class="text_username">
            </div>
        </div>
    </div>
</div>

如果您对设计或流程有任何疑问，请参阅CSS，我不知道向下滚动的语法。

.modalcontainer
{
    text-align: center;
}
.modal
{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  display:none;
}
.modal_close
{
  width:100%;
  height:100%;
  background:rgba(0,0,0,.8);
  position:fixed;
  top:0;
}
.close
{
  cursor:pointer;
}
.modal_main
{
  width:50%;
  height:35em;
  background:#fff;
  z-index:4;
  position:fixed;
  top:2em;
  border-radius:4px;
  left:24%;
  display:none;
    -webkit-animation-duration: .5s;
    -webkit-animation-delay: .0s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
      -webkit-backface-visibility: visible!important;
    -webkit-animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}

button
{
padding:20px;
border-radius:5px;
background:#3399cc;
border:none;
font-size:20px;
color:#fff;
}

Answer 1

你尝试过overflow propertie css吗？

.modal { overflow-y: scroll; }

Answer 2

HM，我想知道你为什么要把两个固定元素粘在一起。固定定位元素就像在显示器上贴一样。它已经不在页面流中了。你不希望一个容器被修复而且所有内部都要再次处于正常流程中吗？

我只是在codepen上重建它以进一步了解它。 .modal只需reportContainer。对.modal和动画的一些调整使其更具可预测性。此外，您应该关注供应商前缀。至少提供那些没有前缀的属性。

display: block

您可能想要查看https://codepen.io/nulllinie/pen/dzBOzO

Modal Scroll不使用CSS和HTML进行正文滚动

2 个答案: