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

Question

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

Answer 1

通过 ajax 动态加载内容只是附加到 dom（或显示模式对话框的 div/container）。通过在 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
               }
          });
      }
  });