JavaScript：定位一个动态创建的元素，以便 "floats" 在页面上

Question

我在一天中的不同 class 时段的某些 class 房间中有 table 个 classes。每个 table 单元格都包含 class 标题和教师姓名。

目标是当光标悬停在 class 标题或讲师姓名上时弹出文本 "balloon"。在前一种情况下，文本将是 class 描述，而在后者中，文本将是讲师的简历。此 material 将在 <div> 设置为 display: none 的标记中。 目前只有第一个cell有这样的material.

最终，我希望气球 "float" 在页面上方并 "attached" 到光标。它应该 self-dismiss 鼠标移出 class 标题或讲师姓名。

将鼠标悬停在 this page. I've developed a reduced case at the pen Popup Project Reduced Case 的第一段中的单词 "block" 上可以看到我正在寻找的效果。为了您的方便，我已经复制了下面的所有代码。

我已经 JavaScript 弹出气球并正确填充了适当的文本。

但是在定位自身时，弹出窗口会将 table 向下推其高度。这会将光标悬停在其上的元素从光标下方移出，从而实现非自愿鼠标移出。弹出窗口被删除，table 重新定位，元素回到光标下方，我们有一个鼠标悬停。弹出窗口弹出，table 被按下，我们有一个 mouseout，所以 war 在两个事件之间。

那么我如何定位带有 JavaScript 的弹出窗口，使其 "floats" 在 table 之上，而不是将其自身插入到 table 之上，并且将 table 向下推？

/*
 ** JavaScript for Class Schedule popup project
 */
;

////  declare global variables  ////
var nodeObject;
var popup;

////  main routine ////
nodeObject = document.getElementsByClassName("class-title");
addListeners(nodeObject);
nodeObject = document.getElementsByClassName("instructor");
addListeners(nodeObject);



////  define functions  ////

function addListeners(nodeObject) {
    var i;
    for (i = 0; i < nodeObject.length; i++) {
      nodeObject[i].addEventListener("mouseover", mouseoverElement);
      nodeObject[i].addEventListener("mouseout", mouseoutFromElement);
    } // end for
  } // end fn addListeners

function populatePopup(popup, event) {
    var popupHTMLTML;
    // populate the popup <div>
    popupHTML = event.target.nextSibling.nextSibling.innerHTML;
    popup.classList.add("popup");
    popup.style.display = "none";
    popup.innerHTML = popupHTML;
    return popup;
  } // end fn populatePopup

function showPopup(popup, parentNode, targetNodeID) {
    parentNode.insertBefore(popup, targetNodeID);
    popup.style.display = "block";
  } // end fn showPopup

function createElement(tag) {
    var newElement;
    newElement = document.createElement(tag);
    return newElement;
  } // end fn createElement

function mouseoverElement(event) {
    popup = createElement('div');
    popup = populatePopup(popup, event);
    showPopup(popup, ScheduleWrapper, ScheduleTable);
  } // end fn mouseoverElement

function mouseoutFromElement(event) {
    ScheduleWrapper.removeChild(popup);
  } // end fn mouseoutFromElement</code></pre>

/* Class Schedule table */

.schedule-wrapper {} .schedule {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  margin: auto 0;
  font-size: .8em;
}
.schedule p {
  line-height: 1.2em;
}
.schedule th,
.schedule td {
  border: solid tan 1px;
  min-width: 250px;
  text-align: left;
  vertical-align: top;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}
.schedule th {
  text-align: center;
}
.schedule .header-row,
.schedule .header-col {
  background-color: lightgrey;
  text-align: center
}
.schedule .header-col {
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: middle;
  max-width: 125px !important;
  min-width: 100px !important;
}
.class-title {
  padding: 5px;
  font-size: 1.2em;
  text-decoration: underline;
  text-align: left;
  color: blue;
}
.instructor {
  padding: 5px;
  padding-top: 8px;
  font-size: 1em;
  text-decoration: underline;
  text-align: right;
  color: blue;
}
.class-descrip,
.instructor-bio {
  color: purple;
  display: none;
}
.class-title:hover + .class-descrip,
.instructor:hover + .instructor-bio {
  display: block;
}
.popup {
  border: 2px solid #000;
  border-radius: 10px;
  width: 200px;
  height: 250px;
  overflow: auto;
  background-color: rgba(0, 0, 0, .6);
  color: #fff;
  z-index: 1000;
}
@media only screen and (max-width: 1200px) {
  .schedule-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    margin: 0 0;
  }
  .schedule {
    width: auto;
  }
  .schedule th,
  .schedule td {
    max-width: 150px;
  }
}

<div id="ScheduleWrapper" class="schedule-wrapper">
  <table id="ScheduleTable" class="schedule">
    <thead>
      <tr class="header-row">
        <!--header row 1-->
        <th scope="col" class="header-col">classroom</th>
        <!--col 1-->
        <th scope="col">A</th>
        <!--col 2-->
        <th scope="col">C</th>
        <!--col 3-->
        <th scope="col">D</th>
        <!--col 4-->
        <th scope="col">E</th>
        <!--col 5-->
        <th scope="col">F</th>
        <!--col 6-->
        <th scope="col">I</th>
        <!--col 7-->
      </tr>
      <tr class="header-row">
        <!--header row 2-->
        <th scope="col" class="header-col">capacity</th>
        <!--col 1-->
        <th scope="col">30</th>
        <!--col 2-->
        <th scope="col">50</th>
        <!--col 3-->
        <th scope="col">100</th>
        <!--col 4-->
        <th scope="col">30</th>
        <!--col 5-->
        <th scope="col">50</th>
        <!--col 6-->
        <th scope="col">100</th>
        <!--col 7-->
      </tr>
    </thead>
    <tbody>
      <tr>
        <!--row 5-->
        <th scope="row" class="header-col">9:30 - 10:30</th>
        <!--header col 1, period 3-->
        <td>
          <p class="class-title">
            Searching on Ancestry.com 2016 (Basic Search Ideas)
          </p>
          <div class="class-descrip">
            <p>
              Searching on Ancestry has changed drastically in 2016. Learn advanced syntax and searching strategies.
            </p>
            <p>This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet.
            </p>
          </div>
          <p class="instructor">
            Mindy McLane
          </p>
          <div class="instructor-bio">
            <p>
              Mindy McLane has taught courses at each of our conferences. She is particularly adept at all things Ancestry.
            </p>
          </div>
        </td>
        <!--col 2-->
        <td>
          <p class="class-title">
            Land and Title Records
          </p>
          <div class="class-descrip">
            <p>
            </p>
          </div>
          <p class="instructor">
            Nancy Feroe
          </p>
          <div class="instructor-bio">
            <p>
            </p>
          </div>
        </td>
        <!--col 3-->
        <td>
          <p class="class-title">
            Open Computer Lab
          </p>
          <div class="class-descrip">
            <p>
            </p>
          </div>
          <p class="instructor">
            varying instructors
          </p>
          <div class="instructor-bio">
            <p>
            </p>
          </div>
        </td>
        <!--col 4-->
        <td>
          <p class="class-title">
            "Hey Dad! What did you do in the War?"
          </p>
          <div class="class-descrip">
            <p>
            </p>
          </div>
          <p class="instructor">
            Jim Johnson
          </p>
          <div class="instructor-bio">
            <p>
            </p>
          </div>
        </td>
        <!--col 5-->
        <td>
          <p class="class-title">
            Thinking through your DNA results and figuring out what to do next.
          </p>
          <p class="instructor">
            Dianne Gianninni Dianne Gianninni
            <div class="instructor-bio">
              <p>
              </p>
            </div>
        </td>
        <!--col 6-->
        <td>
          <p class="class-title" ">
                  Come Find Out What’s Available at the Family History Center in Springdale
                  </p>
                  <div class="class-descrip "><p>
                  </p>
                  </div>
                  <p class="instructor ">
                  Charlie Fowler
                  </p>
                  </div>
                </td>         <!--col 7-->
      </tr>
      
     </tbody>
    </table>
    </div>

Answer 1

[...] how do I position the popup with JavaScript so that it "floats" over the table rather than inserting itself above the table and pushing the table down?

您将使用 CSS 的 position: absolute 并设置至少两 (2) 个以下属性：top, right, bottom, left 用于您的 .popup class .

/*
 ** JavaScript for Class Schedule popup project
 */
;

////  declare global variables  ////
var nodeObject;
var popup;

////  main routine ////
nodeObject = document.getElementsByClassName("class-title");
addListeners(nodeObject);
nodeObject = document.getElementsByClassName("instructor");
addListeners(nodeObject);



////  define functions  ////

function addListeners(nodeObject) {
    var i;
    for (i = 0; i < nodeObject.length; i++) {
      nodeObject[i].addEventListener("mouseover", mouseoverElement);
      nodeObject[i].addEventListener("mouseout", mouseoutFromElement);
    } // end for
  } // end fn addListeners

function populatePopup(popup, event) {
    var popupHTMLTML;
    // populate the popup <div>
    popupHTML = event.target.nextSibling.nextSibling.innerHTML;
    popup.classList.add("popup");
    popup.style.display = "none";
    popup.innerHTML = popupHTML;
    return popup;
  } // end fn populatePopup

function showPopup(popup, parentNode, targetNodeID) {
    parentNode.insertBefore(popup, targetNodeID);
    popup.style.display = "block";

    // set these to whatever values you'd like to offset by
    popup.style.top = 0;
    popup.style.left = 0;
  } // end fn showPopup

function createElement(tag) {
    var newElement;
    newElement = document.createElement(tag);
    return newElement;
  } // end fn createElement

function mouseoverElement(event) {
    popup = createElement('div');
    popup = populatePopup(popup, event);
    showPopup(popup, ScheduleWrapper, ScheduleTable);
  } // end fn mouseoverElement

function mouseoutFromElement(event) {
    ScheduleWrapper.removeChild(popup);
  } // end fn mouseoutFromElement</code></pre>

/* Class Schedule table */

.schedule-wrapper {} .schedule {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  margin: auto 0;
  font-size: .8em;
}
.schedule p {
  line-height: 1.2em;
}
.schedule th,
.schedule td {
  border: solid tan 1px;
  min-width: 250px;
  text-align: left;
  vertical-align: top;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
}
.schedule th {
  text-align: center;
}
.schedule .header-row,
.schedule .header-col {
  background-color: lightgrey;
  text-align: center
}
.schedule .header-col {
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: middle;
  max-width: 125px !important;
  min-width: 100px !important;
}
.class-title {
  padding: 5px;
  font-size: 1.2em;
  text-decoration: underline;
  text-align: left;
  color: blue;
}
.instructor {
  padding: 5px;
  padding-top: 8px;
  font-size: 1em;
  text-decoration: underline;
  text-align: right;
  color: blue;
}
.class-descrip,
.instructor-bio {
  color: purple;
  display: none;
}
.class-title:hover + .class-descrip,
.instructor:hover + .instructor-bio {
  display: block;
}
.popup {
  border: 2px solid #000;
  border-radius: 10px;
  width: 200px;
  height: 250px;
  overflow: auto;
  background-color: rgba(0, 0, 0, .6);
  color: #fff;
  z-index: 1000;
  position: absolute;
}
@media only screen and (max-width: 1200px) {
  .schedule-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    margin: 0 0;
  }
  .schedule {
    width: auto;
  }
  .schedule th,
  .schedule td {
    max-width: 150px;
  }
}

<div id="ScheduleWrapper" class="schedule-wrapper">
  <table id="ScheduleTable" class="schedule">
    <thead>
      <tr class="header-row">
        <!--header row 1-->
        <th scope="col" class="header-col">classroom</th>
        <!--col 1-->
        <th scope="col">A</th>
        <!--col 2-->
        <th scope="col">C</th>
        <!--col 3-->
        <th scope="col">D</th>
        <!--col 4-->
        <th scope="col">E</th>
        <!--col 5-->
        <th scope="col">F</th>
        <!--col 6-->
        <th scope="col">I</th>
        <!--col 7-->
      </tr>
      <tr class="header-row">
        <!--header row 2-->
        <th scope="col" class="header-col">capacity</th>
        <!--col 1-->
        <th scope="col">30</th>
        <!--col 2-->
        <th scope="col">50</th>
        <!--col 3-->
        <th scope="col">100</th>
        <!--col 4-->
        <th scope="col">30</th>
        <!--col 5-->
        <th scope="col">50</th>
        <!--col 6-->
        <th scope="col">100</th>
        <!--col 7-->
      </tr>
    </thead>
    <tbody>
      <tr>
        <!--row 5-->
        <th scope="row" class="header-col">9:30 - 10:30</th>
        <!--header col 1, period 3-->
        <td>
          <p class="class-title">
            Searching on Ancestry.com 2016 (Basic Search Ideas)
          </p>
          <div class="class-descrip">
            <p>
              Searching on Ancestry has changed drastically in 2016. Learn advanced syntax and searching strategies.
            </p>
            <p>This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet. This is some blah blah tet.
            </p>
          </div>
          <p class="instructor">
            Mindy McLane
          </p>
          <div class="instructor-bio">
            <p>
              Mindy McLane has taught courses at each of our conferences. She is particularly adept at all things Ancestry.
            </p>
          </div>
        </td>
        <!--col 2-->
        <td>
          <p class="class-title">
            Land and Title Records
          </p>
          <div class="class-descrip">
            <p>
            </p>
          </div>
          <p class="instructor">
            Nancy Feroe
          </p>
          <div class="instructor-bio">
            <p>
            </p>
          </div>
        </td>
        <!--col 3-->
        <td>
          <p class="class-title">
            Open Computer Lab
          </p>
          <div class="class-descrip">
            <p>
            </p>
          </div>
          <p class="instructor">
            varying instructors
          </p>
          <div class="instructor-bio">
            <p>
            </p>
          </div>
        </td>
        <!--col 4-->
        <td>
          <p class="class-title">
            "Hey Dad! What did you do in the War?"
          </p>
          <div class="class-descrip">
            <p>
            </p>
          </div>
          <p class="instructor">
            Jim Johnson
          </p>
          <div class="instructor-bio">
            <p>
            </p>
          </div>
        </td>
        <!--col 5-->
        <td>
          <p class="class-title">
            Thinking through your DNA results and figuring out what to do next.
          </p>
          <p class="instructor">
            Dianne Gianninni Dianne Gianninni
            <div class="instructor-bio">
              <p>
              </p>
            </div>
        </td>
        <!--col 6-->
        <td>
          <p class="class-title" ">
                  Come Find Out What’s Available at the Family History Center in Springdale
                  </p>
                  <div class="class-descrip "><p>
                  </p>
                  </div>
                  <p class="instructor ">
                  Charlie Fowler
                  </p>
                  </div>
                </td>         <!--col 7-->
      </tr>
      
     </tbody>
    </table>
    </div>

JavaScript：定位一个动态创建的元素，以便 "floats" 在页面上

JavaScript: position a dynamically created element so that "floats" over the page

javascript

floating