【问题标题】: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 文档。
猜你喜欢
  • 2013-05-08
  • 1970-01-01
  • 2012-04-08
  • 1970-01-01
  • 2019-11-07
  • 2011-04-19
  • 1970-01-01
  • 2014-08-17
  • 1970-01-01
相关资源
最近更新 更多