【发布时间】：2021-07-02 22:54:53
【问题描述】：
我正在做一个项目，其中一个 javascript 函数创建一个模态并使用来自外部页面的 HTML 来填充模态。但是，我遇到了一个问题。使用 CSS，我将模态的窗口设置为“自动”高度，当它独立而不被 AJAX 请求时，它工作得很好。在此处查看工作示例：https://codepen.io/dansbyt/pen/VwbYdMJ
但是，每当我使用 AJAX 调用模式时，棘手的部分就出现了。高度根本没有正确设置。 This is a reference photo of what is happening。在这张参考照片中，.modal-window 的高度似乎约为 160 像素，我假设它来自 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.tem.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>
【问题讨论】：
标签： javascript css ajax