如何将内容添加到模态，例如通过 ajax 加载的 div答案

【问题标题】：How can I add content to a modal like divs loaded via ajax如何将内容添加到模态，例如通过 ajax 加载的 div
【发布时间】：2013-04-19 04:45:47
【问题描述】：

我有一个页面，其中有一个缩略图库。单击一个时，我想显示更大的图像，然后以类似模式的方式显示有关图片的更多信息，如has been done here 单击图像以了解我的意思。内容将通过 ajax 加载。我还想预加载更大的图像，这样当用户单击缩略图时，他们将能够在等待加载附加信息时查看更大的图像。我是模态的新手，所以我怎么能做到这一点。

【问题讨论】：

我正在尝试各种模式教程，但还没有找到支持使用 Zurb 基金会的 ajax like this 动态加载内容的教程。

标签： javascript jquery ajax web-applications modal-dialog

【解决方案1】：

通过 ajax 动态加载内容只是附加到 dom（或显示模式对话框的 div/容器）。通过在 ajax 请求到达时附加它，您实际上会刷新模态对话框的外观以反映新内容。

我认为您不会找到“支持 ajax”的模式对话框。相反，您正在寻找一个在渲染之前或对话框打开时触发事件的事件，以便您可以创建您的 ajax 调用。 jQuery UI 模态对话框支持此功能。

$( ".selector" ).dialog({                          //open the dialog
      open: function( event, ui ) {                //fire function before rendering
          $.ajax({                                 //make your ajax call to get content
               url: "test.html",                   
               type: "POST",
               data: "name=value&name=value",
               success: function(html){
                    $(this).append(html);          //append your content to the dialog
               }
          });
      }
  });

【讨论】：

好，我就用这个方法。我怎样才能让模态像Pinterest does 一样跨越整个页面。大多数模态似乎在页面上显示为矩形部分。我希望我的页面看起来好像一个新页面悬停在原始页面上，有人可以上下滚动内容。
设置模态对话框的高度和宽度。有关对话框功能，请参阅 jquery ui 文档。