个人中心
gpt4 book ai didi

javascript - 如何使用css弹出多标签

转载 作者：行者123 更新时间：2023-11-30 00:25:29 25 4
gpt4 key购买 nike

我一直在努力解决以下代码

<!DOCTYPE html>
<html lang ="en">
<head>
<style type="text/css">
a{
  text-decoration:none;
  color:#333;
 }
#pop{
	width:557px;
	height:400px;
	background:#333;
	left: 30%;
	margin-top:80px;
	z-index:999999;
	box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}
#pop2{
	width:557px;
	height:400px;
	background:#333;
	left: 30%;
	margin-top:80px;
	z-index:999999;
	box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}

.content {
	width:100%;
	background: #fff;
	color:#666;
	width:500px;
	height: 300px;
	overflow-y:scroll;
	margin:auto;
	padding:10px;
	text-align:justify;
	box-shadow: 0px 0px 10px #333 inset;
	-webkit-box-shadow: 0px 0px 10px #333 inset;
	-moz-box-shadow: 0px 0px 10px #333 inset;
}

#pop:target{
	height:30px;
	width:250px;
	overflow:hidden;
	position:fixed;
	bottom:0;
	left:236px;
}
#pop2:target{
	height:30px;
	width:250px;
	overflow:hidden;
	position:fixed;
	bottom:0;
	left:236px;
}
</style>
</head>

<a href="#" onclick="document.getElementById('pop').style.display='block';">
    CLICK HERE
</a>  
 
<div id="pop" style="display:none;">
<div class="buttons-bar">
&nbsp;&nbsp;&nbsp;Header
<a href="" onclick="document.getElementById('pop').style.display='none'">X</a>
<a href="#">></a>
<a href="#pop" >-</a>
</div>
<div class="content">
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> 
<a href="#" onclick="document.getElementById('pop2').style.display='block';">
    CLICK HERE
</a>  
 
<div id="pop" style="display:none;">
<div class="buttons-bar">
&nbsp;&nbsp;&nbsp;Header
<a href="" onclick="document.getElementById('pop2').style.display='none'">X</a>
<a href="#">></a>
<a href="#pop2" >-</a>
</div>
<div class="content">
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> 
</html>

但这里的问题是，我使用“:target”伪类，所以只能打开一个选项卡，当弹出窗口最小化时，另一个弹出窗口打开并最小化，第一个弹出打开，但我喜欢有多个标签。关于我如何绕过它的任何想法？欢迎任何想法，甚至是 javascript。谢谢

最佳答案

给你，这是我做的东西。

我让它易于扩展，您所要做的就是复制另一个选项卡的 HTML。如果这不是您要查找的内容，我可以对其进行修改。

编辑:固定代码，使最小化的弹出窗口将最小化其他弹出窗口然后最大化

http://jsfiddle.net/weissman258/cd866j6h/4/ 

function expand_collapse(elem) {
    var top_div = elem.parentNode.parentNode.parentNode;
    if (top_div.classList.contains("maximized")) {
        elem.innerHTML = "&#9650;";
        top_div.classList.toggle("minimized", true);
        top_div.classList.toggle("maximized", false);
    } else {
        var popouts = document.getElementsByClassName("pop_out");
        for(var i=0;i<popouts.length;i++) {
            popouts[i].classList.toggle("minimized", true);
            popouts[i].classList.toggle("maximized", false);
            popouts[i].getElementsByClassName("expand_collapse")[0].innerHTML = "&#9650;";
        }
    elem.innerHTML = "&#9660;";
    top_div.classList.toggle("maximized", true);
    top_div.classList.toggle("minimized", false);
    }
}

function close_pop(elem) {
    elem.parentNode.parentNode.parentNode.style.display = 'none';
}
.pop_out {
  background: #333;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 0px 10px #000;
}
.pop_content {
  background: white;
  font-size: 15px;
  padding: 2px;
}
.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;
  /* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */
}
.close_pop {
  cursor: pointer;
}
.close_pop:hover {
  color: red;
}
.expand_collapse {
  margin-right: 10px;
  cursor: pointer;
}
.expand_collapse:hover {
  color: #ccc;
}
<div style="position:fixed;bottom:-4px;">
  <div class="pop_out minimized">
    <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);">&#9650;</span>
      <span class="close_pop" onclick="close_pop(this);">X</span></span>
    </div>
    <div class="pop_content">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 class="pop_out minimized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 2</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9650;</span>
      <span class="close_pop" onclick="close_pop(this);">X</span></span>
    </div>
    <div class="pop_content">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>

关于javascript - 如何使用css弹出多标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31581970/

25 4 0
文章推荐： android - 使用可绘制对象作为侧面图标的复合 EditText
文章推荐： javascript - 即时搜索延迟1个字符
文章推荐： javascript - 页面加载时，jQuery触发点击事件
文章推荐： javascript - 如何在 Angular Protractor 中使用类单击日历图标
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com