How Do I Close A Modal Dialog When A Link (internal Or External) Is Selected And How Do I Set One Or More Exceptions?

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 a

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

Solution 2:

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

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

.section{
  margin-bottom:300px;
}

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