Prevent opening modal if click on specyfic element in modal opener

Question

I have code

<div class="owl-item text-center col-lg-6 col-md-6 col-sm-12">
  <div class="thumbnail-variant-5 cursor-pointer" data-toggle="modal" data-target=".pz-modal">
    <div class="thumbnail-variant-5-img-wrap">
      <img class="img-circle" src="images/team-2-151x151.jpg" width="129" height="129" alt="">
    </div>
    <h4>NAME</h4>
    <div class="divider-fullwidth bg-porcelain"></div>
    <div class="link-group">
      <span class="icon icon-xxs icon-primary fa-envelope-o"></span><a class="link-black no-modal" href="mailto:#">email</a>
    </div>
    <div class="link-group">
      <span class="icon icon-xxs icon-primary fa fa-map-marker" aria-hidden="true"></span> City
    </div>
  </div>
</div>

Element shoud show modal, but not if i click on link with mail to. Now it's open email client and show modal.

I will try:

 $('.modal').on('show.bs.modal', function (e) {
    var link = e.relatedTarget;
    console.log(link);
    if($(link).hasClass('no-modal')) {
      e.stopPropegation();
    }  
  });

but relatedTarget are set to <div class="thumbnail-variant-5 cursor-pointer" data-toggle="modal" data-target=".pz-modal">

How i can stop showing modal if i click on link?

Answer 1

You also need to specify e.preventDefault(); :

 $('.modal').on('show.bs.modal', function (e) {
    var link = e.relatedTarget;
    console.log(link);
    if($(link).hasClass('no-modal')) {
      e.stopPropegation();
      e.preventDefault();
    }  
  });