显示模式窗口关闭点击



我已经创建了一个包含联系人表单的显示模式框。当我点击里面的盒子,盒子立即关闭,当然这是没有用的。我无法填写这张表格。

我使用的代码是:

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

,然后模态显示ok,但当我点击它里面,它关闭。

我想与其他库有冲突。我如何使用一些工具来找出冲突在哪里?

我也给你我的custom.js文件。你能告诉我如何将javascript添加到这个文件中吗?谢谢!

你可以试试这样做

$('.pop-up-selector').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
}
$('.close-reveal-modal').on('click', function() {
   // your closing function
}

相关内容

  • 没有找到相关文章

最新更新