Question

我创建了一个包含联系表单的显示模式框。当我在框内点击时，框立即关闭，当然这是没用的。我无法填写表格。

我正在使用的代码是：

<body>
<div style="background:black;z-index: 5;" id="myModal" data-reveal class="reveal-modal"  aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
  <h3>Contact us</h3>
<script src="http://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<p><i>Use the form to get in touch with us.</i></p>



<form action="some-file.php" method="POST">

<p>Name:*</p>

<input style="width:300px;" name="username" type="text" required />

<p>E-mail Adress:*</p>

<input style="width:300px;" name="useremail" type="text" required />

<p>Subject:*</p>

<input style="width:300px;" name="usersubject" type="text" required />

<p>Message:*</p>

<textarea style="width:300px;" cols="40" name="usermessage" rows="5" required></textarea>


<div class="g-recaptcha" data-sitekey="sitekey"></div>

<input type="submit" value="send" name="submit"/>
</form>

  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

.
.
.
.
.

代码继续，然后我称之为模态：

<ul class="off-canvas-list sticky">
        <li><label>HOME</label></li>
        <li><a href="#top"><STRONG>TOP</STRONG></a></li>
        <li><a href="#overview"><STRONG> OVERVIEW</STRONG></a></li>
             <li><a href="#how"><STRONG>HOW </STRONG></a></li>
          <li><a href="#features-a" ><STRONG>FEATURES</STRONG></a></li>
        <li><a href="#newsletter"><STRONG>NEWSLETTER</STRONG></a></li> 
        <li><a href="#" data-reveal-id="myModal"><strong>CONTACT</strong></a></li>
          <li><a zf-close="" class="close-button"><strong>CLOSE MENU</strong></a></li>
      </ul>

然后模态显示正常但是当我在里面点击时它会关闭。

我认为与其他图书馆存在一些冲突。我怎么能用一些工具来找出冲突的位置？

我也给你我的custom.js文件。你能不能指出我如何将javascript添加到这个文件？谢谢！

Answer 1

嗯，你可以试试这样做

$('.pop-up-selector').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
}

$('.close-reveal-modal').on('click', function() {
   // your closing function
}

点击

1 个答案: