显示带有 HTML 内容的模式窗口答案

【问题标题】：Show a modal window with HTML content显示带有 HTML 内容的模式窗口
【发布时间】：2013-06-24 06:13:26
【问题描述】：

我正在这里开发一个小型网站（刚开始使用 Zurb Foundation）并制作了一个基本的网格布局，其中包含大型 Metro 风格的 div 缩略图（页面上大约 10 个缩略图）。

我希望在此处为用户添加交互，即当用户单击这些缩略图中的任何一个时，会显示一个模式窗口，显示有关单击的特定项目的更多信息。（有点类似于我们大量可用的图片库灯箱插件）

但是，我想知道从以下两个中实现相同目标的更好方法是什么。我的模态弹出对话框的内容是否应该在单独的 html 中，并且我应该在用户点击时通过 ajax 获取它们？
或者我应该只隐藏这些部分并在用户点击时显示它们？
每个部分都类似于一个项目名称，点击它会显示项目描述（不同的项目可能有视频、图像、描述等）

对于上述更好的方法，最好查看有关如何显示模式弹出窗口的示例（考虑到它应该是最好适用于所有缩略图的东西，而不是做每个缩略图的单独处理程序）

【问题讨论】：

如果您有 codepen 或小提琴，获得一些帮助会有所帮助。我确实有一个想法，但不想构建一些可能与您的内容结构大不相同的内容结构。（相邻的选择器，放在一边...）thx

标签： javascript jquery html css modal-dialog

【解决方案1】：

最好的方法是将这些对话放在一个单独的文件中，并在用户单击某些内容时通过 ajax 加载它们。这将使事情更容易管理，并且更有条理。

如果您将 html 存储在隐藏的 div 中，这可能会浪费资源，因为用户不会使用该页面加载中的所有对话。您可能也很难让您的代码保持最新，因为您必须在隐藏的 div 部分中更新它，如果您同时使用两者，则在外部文件部分中更新它。

我的建议是将所有 html 放在 php 类/函数中（或使用 php MVC 框架），并在需要时从那里加载它。这样，您只需从一个位置更新它即可在整个站点上进行更改。对于 AJAX 加载，以 JSON 格式加载 html，然后您可以在 JSON 中添加其他变量（这将使代码更有条理），例如外部脚本和 CSS 文件和状态指示器。

【讨论】：

【解决方案2】：

这是一个独立的示例。运行后请注意以下几点：

在<head>标签中加载jQuery/jQueryUI库
通过以下方式识别单击了哪个图像：(1) 每当单击 img 类的元素时触发单击事件，以及 (2) 通过 jQuery 获取该特定 img 的 ID
使用 AJAX 将该图像 ID 发送到 PHP 处理器文件
PHP 处理器文件做一些事情，然后发回结果
在 AJAX 成功函数中收到来自 PHP 的结果。所有使用接收到的数据（来自 PHP）的处理必须在成功函数中进行，包括调用 JQUI dlg
JQUI dlg 在 TEST.PHP 中以空 DIV 开头，在 AJAX 成功函数中填充了标记：$('#dlgID').html(data_received_from_PHP);
记得在单击 OK 按钮时关闭 JQUI dlg（否则您可以将该命令放在 JQUI dlg 的 close: 部分）

要运行这个简单的示例，您需要两个文件：

文件 1：TEST.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $('.img').click(function() {
                    var iid = $(this).attr('id');
                    //alert('You clicked ID: ' + iid);
                    $.ajax({
                        type: "POST",
                        url: "yogibear.php", // "source.php",
                        data: "iid="+iid,
                        success: function(data) {
                            //alert('AJAX recd: ' +data);
                            $('#moddlg').html(data);
                            $('#moddlg').dialog('open');
                        } //END success fn
                    }); //END $.ajax

                });
                $('#moddlg').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400, //default is 300
                    title: 'This is yer dialog:',
                    buttons: {
                        'Click Me': function() {
                            $(this).dialog('close');
                        }
                    },
                    close: function() {
                        alert('Dlg is closing... I can do more stuff in here, including running another AJAX call');
                    }
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <img id="i-1" class="img" src="http://placehold.it/140x100" />
    <img id="i-2" class="img" src="http://placehold.it/140x100" />
    <img id="i-3" class="img" src="http://placehold.it/140x100" />
    <img id="i-4" class="img" src="http://placehold.it/140x100" />
    <div id="moddlg"></div>

</body>
</html>

文件 2：YOGIBEAR.PHP

<?php
    $x = $_POST['iid'];
    die('PHP file recd: ' . $x);
    //Of course, this is where you receive the img id sent via AJAX
    //and look up stuff in MySQL or etc, then return the results
    //simply by putting it all into a variable and ECHOing that
    //variable. Or, you can use JSON to echo an array - but make
    //sure to look up a couple of examples as you must add another
    //couple of params to the AJAX code block

【讨论】：