如何在彈出模式中僅顯示來自外部html文件的一個div ID？

Question

我在使用jQuery Modal的彈出模式中顯示的外部html文件上有一些內容。 我可以很好地顯示整個頁面，但是我只想一次顯示一個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，我認為該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

從您鏈接的文檔示例中，您可以執行以下操作：

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

體內最好有模式內容包裝器：

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