在fancybox之外添加自定义html

Fancybox 是一个流行的 jQuery 插件，用于创建响应式的灯箱效果。你可以在 Fancybox 弹出窗口之外添加自定义 HTML 内容，以实现更复杂的布局和功能。以下是如何在 Fancybox 之外添加自定义 HTML 的步骤和示例代码。

步骤

引入 Fancybox：确保你已经引入了 Fancybox 的 CSS 和 JavaScript 文件。
创建 HTML 结构：在你的 HTML 文件中创建 Fancybox 弹出窗口和自定义 HTML 内容。
初始化 Fancybox：使用 jQuery 初始化 Fancybox。
添加自定义 HTML：在 Fancybox 弹出窗口之外添加自定义 HTML 内容。

示例代码

以下是一个完整的示例，展示如何在 Fancybox 弹出窗口之外添加自定义 HTML 内容。

1. 引入 Fancybox

在你的 HTML 文件中引入 Fancybox 的 CSS 和 JavaScript 文件。你可以从 Fancybox 官方网站下载这些文件，或者使用 CDN。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fancybox with Custom HTML</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
    <style>
        /* 自定义样式 */
        .custom-html {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 9999; /* 确保在 Fancybox 之上 */
        }
    </style>
</head>
<body>

2. 创建 HTML 结构

在你的 HTML 文件中创建 Fancybox 弹出窗口和自定义 HTML 内容。

    <!-- 自定义 HTML 内容 -->
    <div class="custom-html">
        <h3>Custom HTML Content</h3>
        <p>This is some custom HTML content outside of Fancybox.</p>
    </div>

    <!-- Fancybox 触发器 -->
    <a data-fancybox="gallery" href="https://via.placeholder.com/800x600">
        <img src="https://via.placeholder.com/150" alt="Thumbnail">
    </a>

    <!-- Fancybox 弹出窗口内容 -->
    <div style="display: none;" id="fancybox-content">
        <h2>Fancybox Content</h2>
        <p>This is the content inside the Fancybox.</p>
    </div>

3. 初始化 Fancybox

在你的 HTML 文件中初始化 Fancybox。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <script>
        $(document).ready(function() {
            $('[data-fancybox="gallery"]').fancybox({
                // 你可以在这里添加 Fancybox 的配置选项
            });
        });
    </script>
</body>
</html>

解释代码

引入 Fancybox：在 <head> 部分引入 Fancybox 的 CSS 文件，并在 <body> 底部引入 jQuery 和 Fancybox 的 JavaScript 文件。
创建 HTML 结构：在 <body> 中创建一个包含自定义 HTML 内容的 <div>，并设置其样式使其固定在页面的右上角。创建一个 Fancybox 触发器和一个隐藏的 Fancybox 弹出窗口内容。
初始化 Fancybox：使用 jQuery 初始化 Fancybox，并为触发器设置 data-fancybox 属性。