CSS div高度自动不适用于AJAX

Question

I'm working on a project where a javascript function creates a modal and uses HTML from an external page to fill the modal.我正在开发一个项目，其中一个 javascript 函数创建一个模态并使用来自外部页面的 HTML 来填充模态。 However, I am running into a problem.但是，我遇到了一个问题。 Using CSS, I have my modal's window set to "auto" height, which works just fine when it stands alone without being requested by AJAX.使用 CSS，我将我的模态窗口设置为“自动”高度，当它独立而不被 AJAX 请求时，它工作得很好。 See working example here: https://codepen.io/dansbyt/pen/VwbYdMJ请参阅此处的工作示例： https : //codepen.io/dansbyt/pen/VwbYdMJ

However, the tricky part comes whenever I call on the modal using AJAX.然而，每当我使用 AJAX 调用模态时，棘手的部分就会出现。 The height does not set properly at all.高度根本没有正确设置。 This is a reference photo of what is happening .这是正在发生的事情的参考照片。 In this reference photo, it seems as though the height of the .modal-window is about 160px, which I assume comes from grid-template-rows: 90px 1fr 60px;在这张参考照片中，似乎.modal-window的高度大约是.modal-window ，我假设它来自grid-template-rows: 90px 1fr 60px; (each of these numbers added together) （这些数字中的每一个都加在一起）

I do not understand what I am doing wrong, because everything seems to be working whenever I take AJAX out of the equation, as shown in the Codepen example.我不明白我做错了什么，因为每当我将 AJAX 排除在等式之外时，一切似乎都在工作，如 Codepen 示例所示。 What is going on?到底是怎么回事？

Main Page:主页：

<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>

External Page (moreinfo.tem.php)外部页面 (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>

Answer 1

This issue has nothing to do with AJAX.这个问题与 AJAX 无关。 .modal-window is set to display: grid; .modal-window设置为display: grid; with grid-template-rows: 90px 1fr 60px;使用grid-template-rows: 90px 1fr 60px; , but remember the response of your AJAX request goes inside #moreInfo as we see here document.getElementById("moreInfo").innerHTML=text; ，但请记住您的 AJAX 请求的响应在#moreInfo正如我们在此处看到的那样document.getElementById("moreInfo").innerHTML=text; . .

What this means is that, .modal-window has only one child, #moreInfo , which forms one row with a maximum height of 90px.这意味着.modal-window只有一个子#moreInfo ，它形成一行，最大高度为 90px。

To fix this leave .modal-window as display: block;要解决此问题，请将.modal-window保留为display: block; and copy the grid styles to #moreInfo .并将网格样式复制到#moreInfo 。

CSS div高度自动不适用于AJAX

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-03 03:38:47

CSS div高度自动不适用于AJAX

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-03 03:38:47

解决方案1
0 已采纳 2021-07-03 03:38:47