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>

但是我在这个灯箱上苦苦挣扎。

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

所以只是为了确保，我使用的是lightbox1，我希望它看起来像一个灯箱。但是我不理解CSS，我似乎无法改变它，所以任何有关这方面的帮助都会很棒。

P.S。如果有办法让第一个灯箱有不同的内容，那么我也是为了那个:)

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

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

1 个答案: