javascript - 如何将弹出窗口插入 Div-6ren

javascript - 如何将弹出窗口插入 Div

转载作者：行者123 更新时间：2023-11-27 23:41:15

我一直在研究弹出窗口，但我无法将其正确放置在容器中...

$(document).ready(function() {
  $('.show-popup').on('click', function() {
    $('.popup').fadeIn();
  });
  $('.close_pop').on('click', function() {
    $('.popup').fadeOut();
  });
});

var max = true;

function expand_collapse(elem) {
  var top_div = elem.parentNode.parentNode.parentNode;
  if (max === false) {
    elem.innerHTML = "&#9660;";
    top_div.classList.toggle("minimized", false);
    top_div.classList.toggle("maximized", true);
    max = true;
  } else if (top_div.classList.contains("maximized")) {
    elem.innerHTML = "&#9650;";
    top_div.classList.toggle("minimized", true);
    top_div.classList.toggle("maximized", false);
    max = false
  }
}

function close_pop(elem) {
  var top_div = elem.parentNode.parentNode.parentNode;
  top_div.style.display = 'none';
  if (top_div.classList.contains("maximized")) {
    max = false;
  }
};

.container {
  height: 30px;
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: red;
}
.popup {
  display: none;
}
.pop_out {
  background: #333;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 0px 10px #000;
}
.minimized {
  display: inline-block;
  margin-right: 10px;
  bottom: 0;
  width: 250px;
  height: 60px;
  overflow: hidden;
}
.maximized {
  top: 0;
  position: fixed;
  display: block;
  width: auto;
  height: auto;
}
.close_pop {
  cursor: pointer;
  color: #fff;
}
.close_pop:hover {
  color: red;
}
.expand_collapse {
  margin-right: 10px;
  cursor: pointer;
  color: #fff;
  height: 3px;
}
.expand_collapse:hover {
  color: #ccc;
}
a {
  position: fixed;
  top: 150;
}

<html>
<link href="./index.css" rel="stylesheet" type="text/css">
<a class="show-popup" href="#">CLICK HERE</a>
<!--Right Here -->
<div class="popup" style="position:fixed;bottom:0px;">
  <div class="pop_out maximized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9660;</span>
      <span class="close_pop">&times</span></span>
    </div>
    <div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
      laborum.
    </div>
  </div>
</div>
<div class="container">
  text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="./index.js"></script>

</html>

每当单击最小化按钮时，我都试图将弹出窗口插入到容器中。任何帮助将不胜感激。

最佳答案

将 .popup 容器从 position:fixed 更改为 position:absolute

在 .minimized 类中添加以下 css

.minimized {
    position: relative;
    z-index: 1;
    vertical-align: bottom;
}

bottom 属性在为容器指定 position 时起作用。

position:relative 在这种情况下会派上用场。

关于javascript - 如何将弹出窗口插入 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31630700/

文章推荐： javascript - 默认添加 babel-polyfill 吗？

文章推荐： html - CSS 列不能正常工作

文章推荐： html - CSS3对overflow属性的误解

文章推荐： javascript - e.dataTransfer.files.length 显示为 0

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将弹出窗口插入 Div