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

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

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

27

4

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

$(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/

27

4

0

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

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

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

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

sql - 哪个最快，1x 插入 512 行，4x 插入 128 行，或 512x 插入 1 行
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
sql:删除 + 插入 vs 更新 + 插入
已经提出了类似的问题，但由于它总是取决于，我单独询问我的具体情况。我有一个网站页面，显示来自数据库的一些数据，要从该数据库生成数据，我必须执行一些相当复杂的多连接查询。数据每天(每晚)更新一次。
python - pymongo 插入 vs pymysql 插入
我正在使用 MongoDb 和 MySQL 的 python 连接器 pymongo 和 pymysql 测试 MongoDb 和 MySQL，特别是插入功能。 pymongo版本是3.4，pymys
sql - 大型 SQL 插入 TVF 与 BULK 插入
从 C# 应用程序插入大型数组(10M 元素)的最快方法是什么？到目前为止，我使用的是批量插入。 C# 应用程序生成一个大文本文件，我使用 BULK INSERT 命令加载它。出于好奇，我编写了一个
java - 语法错误 : insert "enum Identifier", 插入 "EnumBody"，插入 "}"
我编写了一个枚举类型，当我为它运行我创建的 JUnit 测试时会出现以下语法错误: java.lang.Error: Unresolved compilation problems: Synt
C二叉搜索树实现——插入
我正在尝试创建一个程序，它将单词列表作为输入，并将它们排序为二叉树，以便能够找到它们，例如像字典。这是我到目前为止所做的，但是 newEl -> el = input; 出现段错误，我知道这是因为它试
latex - 缺少 $ 插入
你好我有编译这个问题 \begin{equation} J = \sum_{j=1}^{C} \end{equation} 我不断收到错误 missing $ inserted 这很奇怪，因
没有主键的 Linq 插入
我需要使用 LINQ to SQL 将记录插入到没有主键的表中。 table 设计得很差；我无法控制表结构。该表由几个 varchar 字段、一个文本字段和一个时间戳组成。它用作其他实体的审计跟踪。
插入 PdfCell 时图像会调整大小
我正在尝试使用 itextsharp 创建 Pdf。我添加了一张包含两列的表格，其中一列包含文本和其他图像。我想要恒定的图像大小如果另一个单元格中的文本增加并且其他单元格中的图像大小不同，我的图像会
php - 插入…………从中选择
我想把 calory 作为 fruits 的第一个值，我做不到，有人能帮忙吗？ $sql = 'INSERT INTO fruits VALUES('', ?, ?, ?)'
r - 插入/扩展季度到月度系列
我有一个包含季度观察结果的 data.frame。我现在想插入每月值(首选三次，线性很好)。中间目标应该是使用 DATE 创建一个 data.frame作为所有每月观察的索引和缺失值。谷歌搜索表明我
sql - 用数组“插入”
我想知道是否有办法在值列表中使用“插入”。我正在尝试这样做: insert into tblMyTable (Col1, Col2, Col3) values('value1', value
Javascript 插入 IFRAME
我想让人们能够在他们的网站中插入单个 Javascript 行，这实际上允许我插入包含我网站内容的固定大小的 IFRAME。它实际上是一个小部件，允许他们搜索我的网站或接收其他信息。这可能吗？最佳答
c# - 插入、选择和更新日期时间
我有一个包含时间的表，列名为 time，数据类型为 Date。在 asp.net 中，我想要一个查询插入日期，另一个查询则在 2 个日期之间进行选择。我已经尝试过这个: string data =
triggers - 触发编译错误(插入)
这是我的代码: create or replace trigger th after insert on stock for each row declare sqty number;
使用存储过程的具有唯一约束的 SQL 插入
这是一个带有具体示例的通用问题。我有一个包含三个字段(流派 ID (PK IDENTITY)、流派和子流派)的表。该表对(流派，子流派)组合具有唯一约束。我想知道如何修改存储过程以在表中不存在时插
Java:插入/替换到特定大小的排序数组
因此，我正在遍历二叉树，节点包含字符串，以及读取文件时该字符串是否出现多次。我只查找读取文件时出现次数最多的前 10 个单词，因此本质上我只是比较 int 值。我的问题是我正在尝试找出一种有效的方法
c++ - 插入 map
我有一张机票和行李 map ，每张门票必须是唯一的，并且必须与 map 上的位置相对应是否可以仅更改行李(m_bagage->秒)而不更改 key ？ std::unordered_map m_c
Java Jdbc 插入
我正在使用 jdbc 驱动程序做一个示例项目。我的问题是，如果我在 2 文本字段中输入空值。 null 不应该加载到数据库中吗？有没有办法避免在数据库中插入空字段？任何帮助将不胜感激。 //Execu
SSIS:插入/更新
我想知道 SSIS 中是否有特定的插入或更新选项。如果我想让程序检查它是更新还是插入，我是否必须做一些编码？或者是否可以启用一个选项，以便它会自行检查 PK 是否存在，然后更新，否则插入？亲切的问

首页

博学

6Ren·AI

商城

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