異なるオブジェクトに異なるライトボックスを持たせる方法

Question

こんにちは、皆さんは非常に簡単な質問かもしれませんが、私はライトボックスで遊んでいますhere。私は自分のサイトとその作業でそれを手に入れましたが、私は別のページでそれを使いたいですが、私は傾けるので、IDを変更する必要があるかもしれないと推測していますか？私は確信していないです、

HTML：

<a id="show-panel" href="#">Show Panel</a> 

<div id="lightbox-panel"> 
    <h2>Lightbox Panel</h2> 
    <p>You can add any valid content here.</p> 
    <p align="center"><a id="close-panel" href="#">Close this window</a></p> 
</div> 
<!-- /lightbox-panel --> 
<div id="lightbox"></div> 
<!-- /lightbox --> 

CSS：

body{ 
    margin:150px 0 0 0; 
    text-align:center; 
    background: #f1e7b0; 
} 
h2{ 
    font-size: 32px; 
} 
a{ 
    text-decoration: none; 
    color: #222222; 
    font-size: 18px; 
} 

/* Lightbox background */ 
#lightbox { 
    display:none; 
    background: rgba(0,0,0,0.8); 
    position:absolute; 
    top:0px; 
    left:0px; 
    min-width:100%; 
    min-height:100%; 
    z-index:1000; 
} 
/* Lightbox panel with some content */ 
#lightbox-panel { 
    display:none; 
    position:fixed; 
    top:100px; 
    left:50%; 
    margin-left:-200px; 
    width:400px; 
    background:#FFFFFF; 
    padding:10px 15px 10px 15px; 
    border:2px solid #CCCCCC; 
    z-index:1001; 
} 

だからちょうど完全に明確にするために、私はそれが1のために働いて、その効果を使用したいです他のオブジェクトには、私はそれらをどのように変更するかを確かめることができないので、他のオブジェクトには異なる内容を持つことができます。

ありがとうございました

Answer 1

以下の例のように、JavaScriptを使用しなくても可能です。必要なのは、対応するidとhrefで:target属性を指定することだけです。

.lightbox { 
 
    position: fixed; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    z-index: 99999; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 400ms ease-in; 
 
    -moz-transition: opacity 400ms ease-in; 
 
    transition: opacity 400ms ease-in; 
 
    pointer-events: none; 
 
} 
 

 
.lightbox:target { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
} 
 

 
.lightbox > div { 
 
    width: 400px; 
 
    position: relative; 
 
    margin: 10% auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
} 
 

 
.close { 
 
    background: black; 
 
    color: #fff; 
 
    line-height: 25px; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: center; 
 
    top: 0; 
 
    width: auto; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover { 
 
    background: red; 
 
}

<a href="#lightbox-1">Box 1</a> 
 

 
<div id="lightbox-1" class="lightbox"> 
 
    <div> 
 
    <a href="#close" title="Close" class="close">Close</a> 
 
    <p> 
 
     Box 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, et deleniti temporibus minus nisi voluptas molestias magni dolore qui, maxime blanditiis dolorem error nostrum, soluta exercitationem hic! Molestiae voluptas necessitatibus quo dignissimos 
 
     quis nobis magni eaque veniam rerum nisi laboriosam rem natus sint amet voluptatem voluptatum explicabo voluptatibus animi, et. 
 
    </p> 
 
    </div> 
 
</div> 
 
<a href="#lightbox-2">Box 2</a> 
 

 
<div id="lightbox-2" class="lightbox"> 
 
    <div> 
 
    <a href="#close" title="Close" class="close">Close</a> 
 
    <p> 
 
     Box 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad saepe non eos officia sequi, nemo quo ex facilis odio fuga ea eaque dolore perspiciatis obcaecati numquam reprehenderit consequuntur, repudiandae alias. 
 
    </p> 
 
    </div>