Question

我有代码

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

元素shoud show modal，但如果我点击链接与邮件，则不会。现在它是开放的电子邮件客户端和show modal。

我会尝试：

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

但relatedTarget设置为<div class="thumbnail-variant-5 cursor-pointer" data-toggle="modal" data-target=".pz-modal">

如果点击链接，我如何停止显示模态？

Answer 1

您还需要指定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();
    }  
  });

如果在模态开启器中单击specyfic元素，则防止打开模态

1 个答案: