我试图模仿一个典型的模态。当用户点击某些内容时，模式会显示，并且透明背景是全屏并且已修复。
目前我有这个
str(m)
## List of 6
## $ : num 1
## $ : num 2
## $ : num 3
## $ : NULL
## $ : chr "text"
## $ : chr(0)
## - attr(*, "dim")= int [1:2] 1 6
## - attr(*, "dimnames")=List of 2
## ..$ : NULL
## ..$ : chr [1:6] "a" "b" "c" "d" ...
.thank-outer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100%;
height: 100vh;
overflow: hidden;
background: rgba(222, 222, 222, 0.7);
}
div的高度不是浏览器的高度，而是整页内容的高度，所以它是可滚动的。
如何更改它以使div的高度只是浏览器的高度？
答案 0 :(得分：1)
将overflow: hidden添加到body。
$outer = $('.thank-outer'),
$body = $('body');
$('button').on('click',function() {
$body.toggleClass('has-modal');
$outer.toggle();
});.thank-outer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100%;
height: 100vh;
overflow: hidden;
background: rgba(222, 222, 222, 0.7);
display: none;
}
.has-modal {
overflow: hidden;
}
button {
position: relative;
z-index: 1001;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<div class="thank-outer" id="thankyou">
Some text<br>
</div>
答案 1 :(得分：0)
无论您的标记位于何处，都无法滚动。此外，您可能希望在其上使用z-index放置......其余部分。
not-scrollable {
height: 100vh;
width: 100vw;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
not-scrollable {
height: 100vh;
width: 100vw;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
/* you don't need what's below */
not-scrollable {
background-color: #369;
color: white;
display: flex;
justify-content: center;
align-items: center;
}<not-scrollable>I'm not scrollable.</not-scrollable>
答案 2 :(得分：0)
<html>
<head>
<style>
body{
height:100%;
width:100%;
margin:auto;
}
#thankyou{
height:100%;
width:100%;
background: rgba(222, 222, 222, 0.7);
}
</style>
</head>
<body>
<div class="thank-outer" id="thankyou">
Some text
</div>
</body>
</html>
答案 3 :(得分：0)
这是我最喜欢的用于创建模态的纯CSS方法，仍需要一些工作才能使其100％响应，但基本骨架就在那里。
模态可以包含元素，在模态外单击将关闭它。其中还有一个关闭按钮。
全屏打开以进行演示。
/* essential code */
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
pointer-events: none;
background: rgba(0, 0, 0, .5)
}
.closeoverlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
display: block;
z-index: 2;
position: fixed;
cursor: pointer;
}
.closebutton {
color: red;
text-decoration: none;
font-size: 30px;
margin: 0 auto;
display: table;
}
.modal:target {
opacity: 1;
pointer-events: auto;
}
.modal:target>.closeoverlay {
display: block;
}
.modal>div {
width: 300px;
height: 500px;
max-width: 75vw;
max-height: 75vh;
text-align: center;
position: relative;
background: #131418;
z-index: 3
}
.wrap,
.modal {
display: flex;
align-items: center;
justify-content: center
}
/*demo fluff follows */
p {
color: green;
font-size: 20px;
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
display: block;
}
.minion {
opacity: .7;
margin: 0 auto;
max-width: 50%;
max-height: 50%;
}
button {
margin: 2em 0 0 0;
cursor: pointer;
}
.closebutton:hover {
color: white;
cursor: pointer;
}
.clutter {
margin: 2em auto;
padding: 40px;
width: 400px;
max-width: 100%;
text-align: justify;
}
@keyframes rotate {
0% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(360deg);
;
}
}<div class="wrap">
<a href="#M"><button>Are you ready to enter the modal?!</button></a>
<div id="M" class="modal">
<div class="modal-content">
<a class="closebutton" href="#">×</a>
<img class="minion" src="https://68.media.tumblr.com/b7a2e2b2d3a3a21ce6e38ee9f24d10a0/tumblr_nwivayrZFM1u95rdno1_400.gif">
<p>Welcome to the modal!</p>
</div>
<a href="#" class="closeoverlay"></a>
</div>
</div>
<div class="clutter">Bacon ipsum dolor amet shoulder sausage rump venison kevin prosciutto salami shank. Venison salami flank doner burgdoggen, shoulder beef sausage swine alcatra short loin pig chuck. Pastrami sirloin shoulder, swine frankfurter beef strip steak sausage
salami tri-tip. Prosciutto leberkas boudin pastrami sausage pork. Hamburger pancetta jowl venison pastrami. Filet mignon alcatra burgdoggen salami, ham hock shoulder pork loin sirloin jowl picanha flank drumstick pancetta. Turkey shoulder cupim rump
ball tip strip steak turducken tri-tip biltong pork doner. Turducken leberkas chuck filet mignon bresaola picanha ball tip pig ground round shankle. Shank pork ribeye fatback, capicola pork loin tri-tip porchetta biltong landjaeger ham hock hamburger.
Strip steak pork chop sirloin, tenderloin pork loin drumstick pig t-bone hamburger tail short ribs. Prosciutto burgdoggen leberkas landjaeger venison, meatloaf flank pork chop sausage bresaola tenderloin. Ham cow t-bone leberkas capicola turkey, jowl
biltong chicken. Salami venison sirloin bresaola chicken. Ground round bacon chuck pastrami capicola tongue t-bone spare ribs leberkas. Short ribs beef andouille jerky shank ham hock. Rump hamburger boudin, short loin doner capicola cow spare ribs salami.
Chicken hamburger strip steak filet mignon salami turkey doner frankfurter ball tip kevin porchetta andouille tongue cupim. Short loin bresaola pork chop porchetta pancetta. Sirloin burgdoggen ground round short loin corned beef cupim porchetta bresaola
brisket leberkas pork chop. Leberkas salami cupim short loin prosciutto pastrami ham ground round strip steak bacon. Jowl brisket beef corned beef pancetta sausage pastrami shank swine. Tri-tip pork belly capicola ball tip tongue pork loin. Rump andouille
swine, pig tenderloin tail hamburger ribeye short loin picanha leberkas porchetta ham beef pork. Biltong bresaola meatball shank tail andouille. Pig spare ribs short ribs ground round pork chop salami turducken.</div>