我已经创建了一个包含联系人表单的显示模式框。当我点击里面的盒子,盒子立即关闭,当然这是没有用的。我无法填写这张表格。
我使用的代码是:
<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">×</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
}