Farklı nesne için farklı ışık kutusu nasıl olur

Question

Merhaba arkadaşlar çok basit bir soru olabilir, ancak bir ışık kutusu here bulundu. Sitemde ve çalışmasında var, ancak bunu farklı bir sayfada kullanmak istiyorum, ama yapamam, bu yüzden kimliğimi değiştirmem gerekebilir. i için emin değilim,

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; 
} 

Dolayısıyla, sadece sadece tamamen açık olmak gerekirse, ben bir biri için çalışan, ancak etkisini kullanmak istiyorum var anter nesnesinde, bunu değiştirmek için emin değilim, böylece diğerinde farklı içeriklere sahip olabilirim.

Teşekkür görüldüğü gibi

Answer 1

Hatta JavaScript olmadan yapabileceğini, aşağıda bu örneğidir. İhtiyacınız olan tek şey, uygun bir id ve href ile :target özniteliğini ele almaktır.

.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>