Question

我目前正在开发一个网站，我想在JavaScript中创建一个模态弹出窗口。问题是，我想从单独的.html文件中提取窗口的内容，而不是从页面上的隐藏div中提取窗口（这就是我见过的大多数示例向您展示如何操作的方法）。

如果有人能指出我如何实现这一点，我真的很感激。

提前致谢

马特D

Answer 1

汤姆的建议很好。您还可以使用jQuery的加载（http://api.jquery.com/load/）函数将load html直接转换为元素：

$(modelContainerId).load(pathToHtml+ " #sectionOfHtml", function (response, status, xhr) {
    $.blockUI({
        message: $(modelContainerId),
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .9,
            color: '#fff',
            top: ($(window).height() - 700) / 2 + 'px',
            left: ($(window).width() - 700) / 2 + 'px',
            width: '700px',
            cursor: 'pointer'
        }
    });

    $('.blockOverlay').attr('title', 'Click to unblock').click($.unblockUI);
});

此处.load(pathToHtml+ " #sectionOfHtml"仅加载来自加载的html的名为#sectionOfHtml的ID。我使用此功能以上下文敏感的方式加载不同的帮助页面。

Answer 2

假设HTML文件与站点位于同一个域中（因为跨域请求不起作用），您可以启动Ajax请求以检索数据并将其插入到包含元素中。

虽然您不需要使用jQuery（或任何其他库）来处理Ajax请求和响应，但它更容易处理跨浏览器的细微差别。

你可以这样做（假设myModel显示为none）：

// Initiate a request to the HTML file
$.get('url-to-file-.html', function(data) {

  // Insert the returned data into an element with
  // the ID of myModel and then show it.
  $('#myModel').html(data).show();

});

简单的例子，但应该这样做。您可以在API页面上查看更多深入的jQuery $.get()示例。

Answer 3

您可以使用iframe在弹出窗口中显示另一个页面。

Answer 4

如果使用jQuery（你应该）

var div = $('#myid');  // container for the content

$.get(url)                      // get the content
 .success(function(resp) {      // on success
   $(div)
      .html(resp)               // populate the div
      .dialog({ modal: true }); // and turn it into a dialog
 });

注意：这个例子使用了jQuery 1.5的新“延迟”语法。如果使用较早的函数，则将处理程序作为参数传递给$.get。

如何在Javascript中使用外部文件创建模态弹出窗口？

4 个答案: