如何使用css弹出多标签

时间：2015-07-23 08:26:04

标签： javascript css tabs popup

我一直试图绕过以下代码

<!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”伪类，因此只有一个选项卡可以打开，当弹出窗口最小化，另一个弹出窗口打开并最小化时，第一个弹出窗口只是弹出打开，但ID喜欢有多个标签。关于我如何绕过它的任何想法？，欢迎任何想法，甚至javascript。感谢

2 个答案:

答案 0 :(得分：1)

你走了，这是我做的东西。

我使其易于扩展，您所要做的就是将HTML复制到另一个选项卡。如果这不是你想要的，我可以修改它。

编辑：固定代码，因此最小化弹出窗口将最小化其他人然后最大化

upload_to 

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>

答案 1 :(得分：0)

喜欢这个......

＆＃13;
＆＃13; 
$(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;
  }
};
＆＃13; 
.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;
  /* 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;
  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;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<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>
＆＃13;
＆＃13;
＆＃13;

现在我可以通过链接打开非常感谢。

相关问题
最新问题