0

i have created a reveal modal box that contains a contact form. when i click inside the box the box closes immediately and of course this is of no use. i cannot fill in the form.

the code i am using is:

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

.
.
.
.
.

the code continues and then i call the modal like:

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

then the modal appears ok but when i click inside it it closes.

i suppose there is some conflict with other libraries. how could i use some tool to find out where is the conflict?

i also give you my custom.js file . could you pleae point me how to add the javascript to this file? thanks!

xbass540
  • 1
  • 4

1 Answers1

0

Well, you can try doing it like 

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

$('.close-reveal-modal').on('click', function() {
   // your closing function
}
philippsh
  • 788
  • 9
  • 17
  • hi, the pop-up-selector should be the class of my anchor, right? – xbass540 Sep 03 '15 at 15:21
  • Looks like it should be $('#myModal') in your case. – philippsh Sep 03 '15 at 15:25
  • hi @philippsh, could you please point me how to add the above javascript into my custom.js file? i have already one linked to my document. – xbass540 Sep 03 '15 at 15:26
  • also what should i put inside closing function? – xbass540 Sep 03 '15 at 15:27
  • Well, as you have the 'jquery' tag I assume you have all you js code wrapped in $(function() {...});. Just add that code into that wrap. And make sure you've renamed all of the selectors right. To close the popup, you can just call .remove() function on your modal. $('#myModal').remove(); – philippsh Sep 03 '15 at 15:29
  • i tried putting everything inisde my ready function ' jQuery(document).ready(function(){' but with no success. – xbass540 Sep 03 '15 at 15:31
  • That's because your DOM elements don't exist when the document is ready. You should run that script after your modal is loaded. Can try adding it inside a in your modal template. – philippsh Sep 03 '15 at 15:34