Işık kutusu oluşturma, başka bir kutu gibi görünür

Question

Sormak için en iyi soru bu değil, biliyorum, ancak bazı lightbox'larda gerçekten sorun yaşıyorum. Bu Lightbox'u kullanmaya çalışıyordum ve iyi çalıştı, ancak hepsi aynı divleri paylaştıkları için birden fazla ışık kutusu kullanamadım. Bu yüzden aynı içeriğe sahip bir ışık kutusu alabilirim.

Daha sonra bu lightbox1 buldum Mükemmel, çünkü 2'den fazla ve daha fazlasına sahip olduğumu görebildiğim için, tek yapmam gereken bu veri hedefini değiştirmem ve farklı ışık kutularını kaybettim. içeriği.

Örnek: Bu lightbox üzerinde CSS ile mücadele ediyorum Ancak

<div id="modaldemo" class="modal-wrap closed" role="dialog"> 
    <div class="modal"> 
     <a href="#" class="modal-close"></a> 
     <div class="modal-content"> 
      <!-- Content Here --> 
      <p>Hello World</p> 
     </div> 
    </div> 
</div> 

.

Peki, yardıma ihtiyacım olan şey, kullanmak istediğim ikinci ışık kutusunu elde etmek ve ilk bakışta görünmesini sağlamaktır.

Sadece emin olmak için lightbox1 kullanıyorum ve bunun bir lightbox gibi görünmesini istiyorum. Ama ben CSS'yi anlamıyorum ve değişmesi mümkün görünmüyor, bu yüzden bu konuda herhangi bir yardım harika olurdu.

P.S. Eğer ilk ışık kutusu farklı bir içeriğe sahip olmanın bir yolu varsa, ben de bunun için hazırım :)

Answer 1

İlk ışık kutusunun artık birden fazla panele sahip olabilmesi için birkaç şeyi değiştirdim. Bunları 2. ışık kutusu örneğine benzer şekilde oluşturabilir ve açabilirsiniz. çok x

<!-- Set Target panel with data-target --> 
<a class="show-panel" data-target="#panel1" href="#">Show Panel 1</a> 

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

JSFiddle