CSS 模态内的可扩展文本问题

Question

我有一个模态 window，其中包含几个 expandable/collapsable 问题。我努力 MINIMUM JS。我有 2 个问题：

即使我使用 overflow:scroll，文本也不会停留在视口内。
即使我使用 :checked + body{overflow:hidden !important}
也无法停止模态 window 后面的页面滚动

我已经阅读了几个 Whosebug 案例并在网上搜索了替代解决方案。你能帮忙吗？

这是我的代码。

var coll = document.getElementsByClassName("qa");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("xactive");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
} 
});
}

/*Main*/
html, body, div, span, p, label, footer, header, section, button, input, textarea{
margin:0;
padding:0;
border:0;
font:inherit;
vertical-align:top;
user-select:text;
-webkit-user-select:text;
letter-spacing:0.01em}

button, input{
display:inline-block;
-webkit-appearance:none;
outline:none;
color:inherit;
overflow:visible;
background-color:transparent;
box-shadow:none;
border-radius:0}

button{cursor:pointer}

/*Button*/
.btn2{display:inline-block;
text-align:center;
line-height:1.17648;
white-space:nowrap;
font-size:19px;
font-weight:400;
color:#06c;
background:none;
max-width:100%;
min-width:26px;
padding-left:22px;
padding-right:22px;
padding-top:12px;
padding-bottom:12px;
border-radius:22px;
border:1px solid #06c;
text-overflow:ellipsis;
cursor:pointer;
vertical-align:middle;
position:relative;
z-index:1;
text-decoration:none;}

.btn2:hover{
background:#06c;
color:#fff}


/*Modal*/
.modal{opacity:0;
visibility:hidden;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
text-align:left;
background:#f2f2f2;
transition:opacity .1s ease;
z-index:7;
display:flex;
flex-direction:column;
height:100vh;
overflow-y:auto}

.modal__bg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
cursor:pointer}

.modal-state{display:none}

.modal-state:checked+.modal{
opacity:1;
visibility:visible}

.modal-state:checked+.modal .modal__inner{top:0}

.modal__inner{
transition:top .1s ease;
position:absolute;
right:0;
bottom:0;
left:0;
height:max-content;
max-width:700px;
margin:auto;
padding:1em 1em;
border-radius:5px}

.modal__close{
position:absolute;
right:1.1em;
top:-.3em;
width:1.1em;
height:1.1em;
cursor:pointer;z-index:1}

.modal__close:after,.modal__close:before{
content:'';
position:absolute;
width:2px;
height:1.5em;
background:#999;
display:block;
transform:rotate(45deg);
left:50%;
margin:-3px 0 0 -1px;top:0}

.modal__close:hover:after,.modal__close:hover:before{background:#000}

.modal__close:before{transform:rotate(-45deg)}

/*Text*/
.qa{
color:#000;
font-weight:600;
font-size:25px;
cursor:pointer;
padding-top:13px;
padding-bottom:13px;
width:100%;
border:none;
text-align:left;
outline:none;
background:none}

.qa:hover{color:#06c}

.qa:after{
content:'+';
color:#000;
float:right}

.xactive:after{content:'×'}

.qacontent{
font-size:25px;
padding-bottom:0;
max-height:0;
overflow:hidden;
transition:max-height 0.1s ease-out;
border-bottom:1px solid rgba(0,0,5,0.1)}

.qacontent p{
margin:0;
padding:0}

.modal:checked + body{overflow: hidden !important}

<section>
<div>
<label class="btn2" for="modal-authorinterview">Author Interview</label>
</div>
</section>

<input class="modal-state" id="modal-authorinterview" type="checkbox" /><div class="modal"><label class="modal__bg" for="modal-authorinterview"></label><div class="modal__inner"><label class="modal__close" for="modal-authorinterview"></label>

<button class="qa">Title</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title2</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title3</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title4</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

</div></div>

Answer 1

只需从 .modal__inner 中删除 position:absolute。不需要它，因为您已经将 position:fixed 设置为其父项。将其更改为 position:relative 以保持相同的绘画顺序。

对于滚动问题只需添加

html {
  overflow:hidden
}

body {
  max-height:100vh;
  overflow:auto;
}

完整代码：

var coll = document.getElementsByClassName("qa");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("xactive");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

/*Main*/

html,
body,
div,
span,
p,
label,
footer,
header,
section,
button,
input,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: top;
  user-select: text;
  -webkit-user-select: text;
  letter-spacing: 0.01em
}

button,
input {
  display: inline-block;
  -webkit-appearance: none;
  outline: none;
  color: inherit;
  overflow: visible;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0
}

button {
  cursor: pointer
}


/*Button*/

.btn2 {
  display: inline-block;
  text-align: center;
  line-height: 1.17648;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 400;
  color: #06c;
  background: none;
  max-width: 100%;
  min-width: 26px;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 22px;
  border: 1px solid #06c;
  text-overflow: ellipsis;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.btn2:hover {
  background: #06c;
  color: #fff
}


/*Modal*/

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: #f2f2f2;
  transition: opacity .1s ease;
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer
}

.modal-state {
  display: none
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible
}

.modal-state:checked+.modal .modal__inner {
  top: 0
}

.modal__inner {
  transition: top .1s ease;
  height: max-content;
  position:relative;
  max-width: 700px;
  margin: auto;
  padding: 1em 1em;
  border-radius: 5px
}

.modal__close {
  position: absolute;
  right: 1.1em;
  top: -.3em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  z-index: 1
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #999;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #000
}

.modal__close:before {
  transform: rotate(-45deg)
}


/*Text*/

.qa {
  color: #000;
  font-weight: 600;
  font-size: 25px;
  cursor: pointer;
  padding-top: 13px;
  padding-bottom: 13px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  background: none
}

.qa:hover {
  color: #06c
}

.qa:after {
  content: '+';
  color: #000;
  float: right
}

.xactive:after {
  content: '×'
}

.qacontent {
  font-size: 25px;
  padding-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  border-bottom: 1px solid rgba(0, 0, 5, 0.1)
}

.qacontent p {
  margin: 0;
  padding: 0
}

html {
  overflow:hidden
}

body {
  max-height:100vh;
  overflow:auto;
}

<section>
  <div>
    <label class="btn2" for="modal-authorinterview">Author Interview</label>
  </div>
</section>

<input class="modal-state" id="modal-authorinterview" type="checkbox" />
<div class="modal"><label class="modal__bg" for="modal-authorinterview"></label>
  <div class="modal__inner"><label class="modal__close" for="modal-authorinterview"></label>

    <button class="qa">Title</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title2</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title3</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title4</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

  </div>
</div>

<p style="font-size:45px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, luctus quis pulvinar sit amet, tempor ac eros. Nam neque ex, gravida sit amet consequat ut, ullamcorper accumsan magna. In vulputate, lacus id dapibus finibus, magna nibh fringilla nisi, in tincidunt massa metus ut augue. Sed nisi nunc, faucibus varius massa eu, ornare cursus nibh. Suspendisse mauris erat, faucibus placerat volutpat et, commodo sed libero. Integer risus risus, pellentesque ac gravida ut, facilisis et ipsum. Morbi consectetur tincidunt eros, viverra consequat odio imperdiet in. Maecenas pellentesque, dui id placerat feugiat, turpis risus pellentesque lectus, sed congue massa orci in ex. Pellentesque volutpat eu lorem vel ultrices. Mauris ornare quis mauris in elementum. Proin dignissim est quam, tempor lacinia libero pretium nec. Fusce quis venenatis magna. Phasellus vitae volutpat sapien. Duis finibus, augue in sollicitudin molestie, turpis quam efficitur magna, sed dapibus dolor est nec orci. Proin mollis tellus eget risus malesuada, a consequat nunc dapibus. Donec quis nisl purus.</p>

CSS 模态内的可扩展文本问题

CSS issues with expandable text inside modal

html

javascript

css

modal-dialog

overflow