How to call a colorbox with several items?

Question

I´ve got the following code:

<div class="item_1">
<div class="Logo"></div>
<div class="Name"></div>
<div class="Link"></div>
<div class="Inhalt_lightbox">Content 1</div>
</div>
<div class="item_2">
<div class="Logo"></div>
<div class="Name"></div>
<div class="Link"></div>
<div class="Inhalt_lightbox">Content 2</div>
</div>
<div class="item_3">
<div class="Logo"></div>
<div class="Name"></div>
<div class="Link"></div>
<div class="Inhalt_lightbox">Content 3</div>
</div>

When I click on the link in "item_1", the content of the div "Inhalt_lightbox" in "item_1" should show up in a light box. How can i do that?

Thanks

Answer 1

I can suggest 3 solutions. First:

First - $('.Inhalt_lightbox').colorbox();

Second way of implementing that is to add Inhalt_lightbox style visible:hidden by default and trigger JavaScript function onclick to add style so it could became visible.

Another way is to style active tab using CSS and JS. Here is a similar code snippet as an example:

$(document).ready(function() {
  $('#tabs li[id^="li_tab"]').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    var id = this.id.replace('li_', '');
    $('#' + id).show().siblings('div[id^=tab]').hide();
  });
});

#tabs ul li.active a {
  color: black
}
#tabs ul li.active {
  background-color: white;
}
body {
  height: 600px
}
h1 {
  color: #CC0000;
  font-family: arial;
  font-size: 18px
}
a.examples {
  color: #CCCCCC
}
a.examples:hover {
  color: black
}
#tabs ul {
  padding: 0px;
  margin: 0px;
  margin-left: 5px;
  list-style-type: none;
}
#tabs ul li {
  position: relative;
  margin-top: 10px;
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  line-height: 20px;
  padding: 5px;
  background-color: white;
  z-index: 9999;
  border: 1px solid #ccc;
  -moz-border-top-left: 4px;
  border-top-left: 4px;
  -moz-border-top-right: 4px;
  border-top-right-: 4px;
  width: 130px;
  background-color: #484848;
  text-decoration: none;
  text-align: center;
  font-family: verdana;
  font-weight: bold;
  font-size: 11px;
  display: inline-block;
  clear: none;
  float: left;
  border-bottom: 1px solid #000000;
  height: 60px;
  margin-bottom: 10px;
}
#tabs ul li:hover {
  background-color: white;
  cursor: pointer;
  font-size: 11px;
  font-family: verdana;
  font-weight: bold;
  color: black;
  border-bottom: white 1px solid;
  height: 60px
}
#tabs #Content_Area {
  padding: 0 15px;
  clear: both;
  overflow: hidden;
  line-height: 19px;
  position: relative;
  top: 20px;
  z-index: 5;
  font-size: 11px;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="popupWindows">
  <div id="header">
    <h1>Title</h1>

  </div>
  <div id="tabs" style="height:120px">
    <div style="border-bottom:1px solid #cccccc; height:81px;">
      <ul>
        <li id="li_tab1">
          <a class="examples">1</a>

        </li>
        <li id="li_tab2">
          <a class="examples">2</a>

        </li>
        <li id="li_tab2"> <a class="examples">3</a> 
        </li>
        <li id="li_tab2"> <a class="examples">4</a</li>
    </ul>
    </div>
        </div>
<div id="Content_Area">
        <div id="tab1">
            content
        </div>

        <div id="tab2" class="hidden">
            content
        </div>
        <div id="tab3" class="hidden">
            content
        </div>

        <div id="tab4" class="hidden">
            content         </div>
    </div>

Answer 2

You can achieve this with pure CSS:

.Inhalt_lightbox {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none
}
.Inhalt_lightbox:target {
	opacity:1;
	pointer-events: auto;
}
.Inhalt_lightbox > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	background: #fff
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: 0px;
	text-align: center;
	top: 0px;
	width: 24px;
	text-decoration: none;
	font-weight: bold
}

.close:hover { background: #00d9ff }

<div class="item_1">
<div class="Logo"></div>
<div class="Name"></div>
<div class="Link"><a href="#openModal">Open Modal</a></div>
<div class="Inhalt_lightbox" id="openModal"><div><a href="#close" title="Close" class="close">X</a>
		<h2>Modal Box</h2>
		<p>This is a sample modal box that can be created using the powers of CSS3.</p>
		<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
	</div></div>
</div>