如何将内容添加到通过ajax加载的div这样的模态中

Question

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

Answer 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
               }
          });
      }
  });