我正在做一个项目，在这个项目中，javascript函数创建了一个模态，并使用外部页面中的HTML来填充该模态。然而，我遇到了一个问题。使用CSS，我将模态的窗口设置为"；自动；高度，当它独立运行而不需要AJAX请求时，它工作得很好。请参阅此处的工作示例：https://codepen.io/dansbyt/pen/VwbYdMJ
然而，每当我使用AJAX调用模态时，棘手的部分就会出现。高度设置不正确。这是正在发生的事情的参考照片。在这张参考照片中，似乎.modal-window的高度约为160px，我认为它来自grid-template-rows: 90px 1fr 60px;(这些数字加在一起(
我不明白我做错了什么，因为每当我把AJAX从等式中去掉时，一切似乎都在起作用，如Codepen示例所示。发生了什么事？
主页：
<html>
<h1> Testing Modal </h1>
<a onclick='taskInfo("1")'>Launch Modal</a>
<div id="infoModal" class="modal">
<div class="modal-window">
<span id="moreInfo"></span>
</div>
</div>
</html>
<script> /* AJAX name selector */
var infoModal = document.getElementById("infoModal");
function assInfo(str){
infoModal.style.display = "block";
fetch("moreinfo.tem.php?assID=" + str).then((response) =>response.text()).then((text) => {
var parser = new DOMParser();
var doc = parser.parseFromString(text, "text/html");
var ele = doc.documentElement;
var scripts = ele.getElementsByTagName('script');
for(var script of scripts){
var head = document.getElementsByTagName('head')[0];
var scriptElement = document.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.innerText = script.innerText;
head.appendChild(scriptElement);
head.removeChild(scriptElement);
}
document.getElementById("moreInfo").innerHTML=text;
});
}
function taskInfo(str){
infoModal.style.display = "block";
fetch("moreinfo.tem.php?taskID=" + str).then((response) =>response.text()).then((text) => {
var parser = new DOMParser();
var doc = parser.parseFromString(text, "text/html");
var ele = doc.documentElement;
var scripts = ele.getElementsByTagName('script');
for(var script of scripts){
var head = document.getElementsByTagName('head')[0];
var scriptElement = document.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.innerText = script.innerText;
head.appendChild(scriptElement);
head.removeChild(scriptElement);
}
document.getElementById("moreInfo").innerHTML=text;
});
}
window.onclick = function(event) { /* Make modal disappear when you click "X" */
if (event.target == infoModal) {infoModal.style.display = "none";}
}
</script>
外部页面(moreinfo.tm.php(
<div class='modal-top'>
<img class='big pic' src='../../resources/pics/teachers/1.jpg'>
<span class='title'>Genre Worksheet</span>
<span class='due'>Due 1w ago</span>
</div>
<div class='modal-content'>
<div class='directions'>
<b>Directions: </b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin. Aliquam nulla facilisi cras fermentum odio eu.
</div>
<textarea placeholder='Type Question..'></textarea>
</div>
<div class='modal-controls'>
<button id='askforhelp' class='button green-btn' onclick='askHelp("showform")'>Ask for Help</button>
<button id='markdone' class='button green-btn'>Mark as Done</button>
<button id='sendmsg' class='button green-btn'>Send Message</button>
<button id='cancelmsg' class='button grey-btn' onclick='askHelp("hideform")'>Cancel Message</button>
</div>
<script>
function askHelp(arg) {
var window = document.getElementsByClassName('modal-window')[0];
var textbox = document.getElementsByTagName("textarea")[0];
var helpBtn = document.getElementById('askforhelp');
var doneBtn = document.getElementById('markdone');
var sendBtn = document.getElementById('sendmsg');
var cancelBtn = document.getElementById('cancelmsg');
if (arg == "showform") {
window.style.height = 'calc(auto + 100px)';
textbox.style.display = 'block';
helpBtn.style.display = 'none';
doneBtn.style.display = 'none';
sendBtn.style.display = 'block';
cancelBtn.style.display = 'block';
}
if (arg == "hideform") {
window.style.height = 'auto';
textbox.style.display = 'none';
helpBtn.style.display = 'block';
doneBtn.style.display = 'block';
sendBtn.style.display = 'none';
cancelBtn.style.display = 'none';
}
}
</script>
<style>
.modal {
display: none;
position: fixed;
z-index: 20;
right: 0; top: 0;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s}
.modal-window{
display: grid;
position: fixed;
padding: 10px;
width: 600px; height: auto;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 16px;
background-color: white;
transition: height 0.5s;
grid-template-rows: 90px 1fr 60px;
grid-template-areas:
"top"
"content"
"controls";}
/* --------[TOP] -------- */
.modal-top {
display: grid;
grid-area: top;
border-bottom: 2px solid #5B7042;
grid-template-columns: 100px 1fr 120px;}
.big.pic{
display: inline-block;
width: 65px;
clip-path: circle();
margin-left: 10px;}
.modal-top .title {
display: flex;
align-items: center;
font-weight: 800;
font-size: 26px}
.due {
display: flex;
align-items: center;
font-size: 18px;
color: gray;}
/* --------[CONTENT] -------- */
.modal-content {
display: block;
grid-area: content;
overflow-y: scroll;
padding: 12px;}
.directions {
font-size: 18px;
line-height: 1.7}
textarea {
display: none;
width: 100%; height: 100px;
box-sizing: border-box;
font-size: 18px !important;
margin-top: 20px;}
/* --------[CONTROLS] -------- */
.modal-controls {
grid-area: controls;
display: flex;
justify-content: center;}
#askforhelp {margin-right: 10px;}
#sendmsg {display: none; margin-right: 10px}
#cancelmsg {display: none}
</style>
这个问题与AJAX无关。.modal-window与grid-template-rows: 90px 1fr 60px;一起设置为display: grid;，但请记住，AJAX请求的响应在#moreInfo内部，如我们在这里看到的document.getElementById("moreInfo").innerHTML=text;。
这意味着，.modal-window只有一个子#moreInfo，它形成了一行，最大高度为90px。
要解决此问题，请将.modal-window保留为display: block;，并将栅格样式复制到#moreInfo。