javascript - 如何在弹出模式中仅显示外部 html 文件中的一个 div id？

Question

我在外部 html 文件上有一些内容，我正在使用 jQuery Modal 在弹出模式中显示这些内容。我能够很好地显示整个页面，但我想一次只显示一个 div，具体取决于单击的链接。

外部页面的内容如下所示:

<div class="review" id="one">This is review #1</div>
<div class="review" id="two">This is review #2</div>
<div class="review" id="three">This is review #3</div>

主页上的链接编码如下:

<a class="link" href="external.html" data-target="#two" rel="modal:open">Read review</a>

然后我有一些 Javascript，我认为它可以只显示选定的 div id，具体取决于单击的链接:

$(document).ready(function() {
  $('.link').on('click', function() {
    var target = $(this).data('target');

    $('.review').not(target).hide();
    $(target).show();
  });
});

这会显示外部 html 中的所有内容，而不仅仅是一个选定的 div。

有没有一种方法可以只显示加载到模式中的外部 html 中的一个 div id？

更新: 我尝试实现下面的 Bhojendra 解决方案，但现在收到错误:

"TypeError: null is not an object (evaluating 'this.$blocker.fadeOut')"

查看代码的链接: https://drive.google.com/open?id=1n61Buty8oexE369jdxCi4lZ9M9wj2SaP

Answer 1

来自文档example您链接的，您可以这样做:

$('.link').click(function(event) {
  event.preventDefault();
  target = $(this).data('target');
  $.get(this.href, function(html) {
    $(html).find(target).appendTo('body').modal();
  });
});

最好在你的 body 中使用模态内容包装器:

<div id="modal-content"></div>

现在，在 jQuery 中，使用这个:

$('#modal-content').html($(content).find(target)).modal()
// html parameter renamed ^^ to content

我打算使用:

$('.link').click(function(event) {
  event.preventDefault();
  target = $(this).data('target');
  $.get(this.href, function(content) {
    $('#modal-content').html($(content).find(target)).modal()
  });
});