javascript - 为什么我的 bootstrap Modal 没有在隐藏时被销毁？如何让多个远程模态正常工作？

Question

我目前正在尝试制作一个作品集风格的网站，并决定使用 Bootstrap 3。我想使用模式从简单的图像库中显示我的作品。我已经成功地生成了每个模式并远程链接它们，但是在打开第二个模式后我遇到了问题。第二个模态的内容是为任何后续调用的模态显示的内容。我尝试使用 javascript 来销毁每个 hide 实例上的模式，但它似乎不起作用，我不明白为什么。有人可以告诉我我做错了什么吗？

图库:

<div class="banner" id="portfolio"><h2>WORK</h2></div>
<div id="gallery" class="final-tiles-gallery effect-zoom effect-fade-out caption-top caption-bg">
  <div class="ftg-items">
    <div class="tile">
      <a class="tile-inner" data-title="VoodooDesignCo." data-toggle="modal" href="portfolioDIR/voodooDetails.php" data-target="#myModal">
        <img class="item" data-src="images/work/voodooDesign.png">
        <span class='title'>Voodoo Design Co.</span>
        <span class='subtitle'>Logo Design and Branding</span>
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" data-title="Godzilla (2014) - Poster Design" data-toggle="modal" href="portfolioDIR/godzillaDetails.php" data-target="#myModal">
        <img class="item" data-src="images/work/godzillaPoster.png">
        <span class='title'>Godzilla (2014)</span>
        <span class='subtitle'>Poster Design</span>
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" data-title="Iron & Air - Title Design" data-toggle="modal" href="portfolioDIR/ironAirDetails.php" data-target="#myModal">
        <img class="item" data-src="images/work/ironAirType.png">
        <span class='title'>Iron & Air</span>
        <span class='subtitle'>Game Concept - Title Design</span>
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" data-title="Aquaman - Title Design" data-toggle="modal" href="portfolioDIR/aquamanDetails.php" data-target="#myModal">
        <img class="item" data-src="images/work/aquamanType.png">
        <span class='title'>Aquaman</span>
        <span class='subtitle'>Movie Concept - Title Design</span>
      </a>
    </div>
    <div class="tile">
      <a class="tile-inner" data-title="AllBikes.com.au" data-toggle="modal" href="portfolioDIR/allbikesDetails.php" data-target="#myModal">
        <img class="item" data-src="images/work/allbikesWeb.png">
        <span class='title'>AllBikes.com.au</span>
        <span class='subtitle'>Website Design and Development</span>
      </a>
    </div>
  </div>
</div>

模态:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-label="close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title text-center"></h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button class="btn btn-defualt" data-dismiss="modal" aria-hidden="true"><span class="fa fa-hand-o-left"></span> Back</button>
      </div>
    </div>
  </div>
</div>

远程模态:

<div class="modal-content">
<div class="modal-header">
  <button class="close" type="button" data-dismiss="modal" aria-label="close">
    <span aria-hidden="true">&times;</span>
  </button>
  <h4 class="modal-title text-center">Iron & Air Title Design - Video Game Concept</h4>
</div>
<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 text-center">
        <img src="images/work/ironAirType.png" alt="Iron & Air: Racing Video Game" class="details img-responsive img-center">
        <p>Title Design/Typeface Exploration</p>
      </div>
      <div class="col-sm-6">
        <h4>Project Info:</h4>
        <p>his project required the typeface design or title design for a game, movie, T.V. show, etc. This design is based on a fictional racing video game, called 'Iron & Air'</p>
        <hr>
        <p>blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-defualt" data-dismiss="modal"><span class="fa fa-hand-o-left"></span> Back</button>
</div>

模态重置 JavaScript:

$("#myModal").on('hidden.bs.modal', function () {
    $("#myModal").removeClass('fade').modal('hide');
    $(this).data('bs.modal', null);
});

Answer 1

不久前我也做过类似的事情...我使用了一种模式并从外部文件中提取内容。每个模态都会将新内容加载到同一个模态中，如下所示

 $("#info").click(function(){
        var url = HOST_NAME+"info/modal-data";
        $( "#modal-body" ).load(url, function() {
        $( "#modal-body" ).show("slow");
        });
          loadModal();
    });

并用它打开模式

function loadModal() {
    $( "#modal-body .page-wrapper" ).remove();
    $( "#modal-body" ).hide();
    $('#edit').modal();

}

模态

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div id="modal-body">

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?=__('modal_close')?></button>
            </div>
        </div>
    </div>
</div>