模态框高度和溢出

Question

我的模态框有一些问题。在溢出时，文本超出了块。我能用这个做什么?我还想删除滚动主页时，模态打开。除了隐藏溢出，还有别的办法吗?这是你可以看到我的问题的地方。

$("#reviewBtn").click(function () {
$("#reviewModal").show()
});
$(".close").click(function () {
$("#reviewModal").hide()
});

.modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
font-size: 14px;
background-color: blue;
margin: auto;
width: 100%;
height: 100%;
padding-top: 2%;
}
.close {
color: #aaaaaa;
font-size: 28px;
font-weight: bold;
float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reviewModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Text </p>
ttt
</div>
</div>
<button  class = "reviews-btn" id="reviewBtn">Click</button>

Answer 1

最简单的方法，如果你通过模式设置打开你的页面的body为display: fixed。

$("#reviewBtn").click(function () {
$("#reviewModal").show();
$('body').css({'display': 'fixed'});
});
$(".close").click(function () {
$("#reviewModal").hide();
$('body').css({'display': 'block'});
});

Answer 2

在模式打开时body中添加class,overflow:hidden在该class中添加class

$("#reviewBtn").click(function () {
$("#reviewModal").show();
$('body').addClass('modal-open');
});
$(".close").click(function () {
$("#reviewModal").hide();
$('body').removeClass('modal-open');
});

body.modal-open {
overflow: hidden;
}
.modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: calc(100vh - 50px);
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
overflow-y: auto;
}
.modal-content {
font-size: 14px;
background-color: #abff3b;
margin: auto;
/*width: 100%;
height: 100%;*/
padding: 2%;
}
.close {
color: #aaaaaa;
font-size: 28px;
font-weight: bold;
float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reviewModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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"Lorem ipsum dolor sit amet, consectetur adipiscing 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.<br/> 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"Lorem ipsum dolor sit amet, consectetur adipiscing 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<br/>Lorem ipsum dolor sit amet, consectetur adipiscing 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"Lorem ipsum dolor sit amet, consectetur adipiscing 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"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing 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. <br/>
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"Lorem ipsum dolor sit amet, consectetur adipiscing 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. <br/> 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"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  <br/>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>
</div>
</div>
<button  class = "reviews-btn" id="reviewBtn">Click</button>

Answer 3

你可能只需要在modal

内给p标签固定高度

.modal-content > p {
height: 40vh;
overflow-y: scroll;
}

Answer 4

$("#reviewBtn").click(function () {
$("#reviewModal").show();
$("body").addClass("overflow-hidden");
});
$(".close").click(function () {
$("#reviewModal").hide();
$("body").removeClass("overflow-hidden");
});

css//

body.overflow-hidden {
overflow:hidden !important;
}

.modal-content {
height:auto;
}
.modal {
overflow-y: scroll;
}