为什么我的bootstrap Modal不能在皮革上被破坏？ 我如何才能使用多个远程模式？

Question

I am currently trying to produce a portfolio-style website, and decided to use Bootstrap 3. I want to use modals to display my work from a simple image gallery. I have managed to successfully produce each modal and remote link them, however I run into an issue after opening the second modal. The second modal's content is then the content shown for any subsequent modal called. I have tried using javascript to destroy the modal on each instance of hide, yet it doesn't seem to be working and I can not figure out why. Can someone please tell me what I'm doing wrong?

Gallery:

<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>

Modal:

<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>

Remote Modal:

<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>

ModalReset JavaScript:

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

Answer 1

I did something similar a while back... I used one modal and pulled in the content from an external file. each modal would load new content into the same modal with something like this

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

and open the modal with this

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

}

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>