Tailwind CSS：如何创建图像模式（图像灯箱）

CSS 1年前 40

这篇实用的文章将引导您完成一个使用 Tailwind CSS 和纯 Javascript 创建图像模式（图像灯箱）的完整示例（如果您对这种编程语言没有太多经验，那完全可以）。

示例预览

我们要构建的示例网页有一个图像网格。单击缩略图（小图像）时，将显示带有大尺寸图像（与缩略图关联）的模式对话框。在右上角，有一个关闭按钮。

以下是它的工作原理：

Tailwind CSS：如何创建图像模式（图像灯箱）

编码

这是生成上述演示的完整源代码：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>KindaCode.com</title>
</head>

<body>
    <h1 class="mt-10 mb-5 text-center text-3xl">Welcome to KindaCode.com</h1>
    <h3 class="mb-10 text-center text-xl">Image Modal/Lightbox Example</h3>

    <!-- Image gird -->
    <div class="p-20 grid grid-cols-4 gap-5">
        <img class="w-full h-full object-cover cursor-pointer"
            src="https://www.kindacode.com/wp-content/uploads/2022/07/flower-4.jpeg" alt="Flower"
            onclick="showModal('https://www.kindacode.com/wp-content/uploads/2022/07/flower-4.jpeg')" />

        <img class="w-full h-full object-cover cursor-pointer"
            src="https://www.kindacode.com/wp-content/uploads/2022/07/flower-3.jpeg" alt="Flower"
            onclick="showModal('https://www.kindacode.com/wp-content/uploads/2022/07/flower-3.jpeg')" />

        <img class="w-full h-full object-cover cursor-pointer"
            src="https://www.kindacode.com/wp-content/uploads/2022/07/flower-2.jpeg" alt="Flower"
            onclick="showModal('https://www.kindacode.com/wp-content/uploads/2022/07/flower-2.jpeg')" />

        <img class="w-full h-full object-cover cursor-pointer"
            src="https://www.kindacode.com/wp-content/uploads/2022/07/flower-1.jpeg" alt="Flower"
            onclick="showModal('https://www.kindacode.com/wp-content/uploads/2022/07/flower-1.jpeg')" />
    </div>

    <!-- The Modal -->
    <div id="modal"
        class="hidden fixed top-0 left-0 z-80 w-screen h-screen bg-black/70 flex justify-center items-center">

        <!-- The close button -->
        <a class="fixed z-90 top-6 right-8 text-white text-5xl font-bold" href="javascript:void(0)"
            onclick="closeModal()">&times;</a>

        <!-- A big image will be displayed here -->
        <img id="modal-img" class="max-w-[800px] max-h-[600px] object-cover" />
    </div>

    <script>
        // Get the modal by id
        var modal = document.getElementById("modal");

        // Get the modal image tag
        var modalImg = document.getElementById("modal-img");

        // this function is called when a small image is clicked
        function showModal(src) {
            modal.classList.remove('hidden');
            modalImg.src = src;
        }

        // this function is called when the close button is clicked
        function closeModal() {
            modal.classList.add('hidden');
        }
    </script>
</body>

</html>

注意：前面示例中的图像来自 Pixabay，在Pixabay 许可下用于教程目的。

解释

由于隐藏的实用程序类，默认情况下模式是隐藏的。单击缩略图时，我们通过删除隐藏的实用程序来显示模式。我们还通过将相应的 URL 传递给showModal函数来在模式中显示图像：

function showModal(src) {
      modal.classList.remove('hidden');
      modalImg.src = src;
 }

模态设置为固定的深色透明背景。它的 z-index 设置为一个高值，以确保没有任何东西可以使它黯然失色。

使模态消失非常简单：

function closeModal() {
      modal.classList.add('hidden');
}

结论

我们研究了一个使用 Tailwind CSS 和 vanilla Javascript 实现图像模式的端到端示例。你可以修改代码，添加一些东西，删除一些东西，调整一些值来改进它。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。

CSS

示例预览

编码

解释

结论

相关文章