javascript - 使灯箱看起来像另一个盒子

Question

这不是最好的问题，我知道，但我确实被一些灯箱问题困住了。我正在尝试使用这个 Lightbox它工作正常，但是我不能有超过一个灯箱，因为它们都共享相同的 div 等。所以我只能有一个内容相同的灯箱。

然后我找到了这个lightbox1这是完美的，因为你可以看到我可以拥有超过 2 个等等，而且很容易，我需要做的就是更改这个的数据目标，我可能会丢失具有不同内容的灯箱。

示例:

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

但是，我正在为这个灯箱上的 CSS 而苦苦挣扎。

所以我需要帮助的是获得第二个灯箱，我想使用的灯箱，并使其看起来像第一个灯箱，如果这有意义的话？

所以为了确保，我正在使用 lightbox1，我希望它看起来像一个灯箱。但我不理解 CSS，而且我似乎无法改变它，所以任何帮助都会很好。

附言如果有办法让第一个灯箱有不同的内容，那么我也愿意:)

Answer 1

我更改了一些内容，以便第一个灯箱现在可以有多个面板。您可以创建和打开它们，类似于第二个灯箱示例。

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