How do I close a modal dialog when a link (interna

问题:

Each time a visitor selects a link, I expect the dialog to disappear and page to scroll down to the specific - selected id (w/o refresh). Of course, I have to set some exceptions as well!

<div class="modal fade" id="basicModal6" tabindex="-1" role="dialog" aria-labelledby="basicModal6" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content fp">
      <button type="button" class="ol close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times fa-2x red"></i></button>
      <div class="heading text-center">
        <h2>Title</h2>
        <p>Text</p>
        <footer class="f2 text-left wrap2">
          <a href="#home">link A</a>
          <a href="#bclass">link B</a>
          <a href="#gclass">link C</a>
        </footer>
      </div>
    </div>
  </div>
</div>

回答1:

for internal links it will automatically redirect to the location, you just need to hide the div. You can do it by this:

If your links are static:

$(".modal a").click(function(){ 
  $(this).closest(".modal").modal("hide");
});

if dynamic:

$(document).on('click', '.modal a', function(){ 
  $(this).closest(".modal").modal("hide");
});

Alternatively, You can also add this onclick on links:

onclick='$(this).closest(".modal").modal("hide")'

for external links it will be redirected to the link, no worries there.

回答2:

You can use .modal('hide'); like this:

$('.gotTo').click(function(){
  var $this=$(this);
  $this.closest('.modal').modal('hide');
});

.section{
  margin-bottom:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="basicModal6" tabindex="-1" role="dialog" aria-labelledby="basicModal6" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content fp">
      <button type="button" class="ol close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times fa-2x red"></i></button>
      <div class="heading text-center">
        <h2>Title</h2>
        <p>Text</p>
        <footer class="f2 text-left wrap2">
          <a href="#home" class="gotTo">link A</a>
          <a href="#bclass" class="gotTo">link B</a>
          <a href="#gclass" class="gotTo">link C</a>
        </footer>
      </div>
    </div>
  </div>
</div>
<a href="#basicModal6" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>
<div id="home" class="section">home</div>
<div id="bclass" class="section">bclass</div>
<div id="gclass" class="section">gclass</div>