Блог

Главная - Вопросы по программированию - Foundation 5 показывает модальные всплывающие окна при прокрутке, но не будет оставаться закрытым

Foundation 5 показывает модальные всплывающие окна при прокрутке, но не будет оставаться закрытым

#javascript

#javascript

Вопрос:

У меня есть режим раскрытия, который активируется после прокрутки, например, в середине страницы, кажется, я не могу заставить его закрыться после того, как я нажимаю закрыть, продолжает появляться, прилагается html amp; script.

Идентификатор — #mymodal7, дело в том, что он появляется, когда вы на полпути вниз.

 <!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link href="css/foundation-icons.css" rel="stylesheet">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<footer class="footer">
  <div class="row">
    <div class="small-12 medium-3 large-3 columns text-left small-text-center"> <br/>
      <ul class="inline-list social">
      </ul>
      <br/>
      <br/>
      <p class="copyright"> <a class="copyright" href="privacy-policy.html">PRIVACY POLICY</a><br/>
      </p>
      <br/>
    </div>
    <div class="small-12 medium-5 large-4 columns">
      <ul class="contact">
      </ul>
      <br/>
    </div>
    <div class="small-12 medium-4 large-5 columns"> <a class="heading-3col-bottombar" data-reveal-id="myModal7"> <img src="img/free-glutathione-ebook-footer.png" alt="Get your Free Glutathione Ebook"/></a>
      <div id="myModal7" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog " style="display: none">
        <div class="large-6 medium-12 columns text-center"> <br/>
          <p class="grey-para-LB">GET A FREE COPY OF:</p>
          <h3 id="modalTitle7" class="heading-1col-blue-LB">A GUIDE TO GLUTATHIONE</h3>
          <img src="img/glutathione-ebook-pop.jpg" alt="Glutathione eBook"/>
          <p class="grey-para-LB italic">Glutathione Boosting Resource, FREE! </p>
        </div>
        <div class="large-6 medium-12 columns text-center"> <br/>
          <script type="text/javascript" src="https://forms.aweber.com/form/94/1288088994.js"></script> 
        </div>
        <a class="close-reveal-modal" aria-label="Close">amp;#215;</a> </div>
      <span class="show-for-small"><br/>
      <br/>
      </span> <br/>
    </div>
  </div>
</footer>
<div class="bottom-stick-bar text-center">
  <div class="row">
    <div class="large-4 medium-4 small-6 columns text-center"> <a class="heading-3col-bottombar hide-for-small" data-reveal-id="myModal6"><i class="fi-telephone"></i>amp;nbsp;GIVE US A CALL</a>
      <div class="show-for-small"> <a class="heading-3col-bottombar" href="tel: 1-954-635-5899"><i class="fi-telephone lite-blue"></i>amp;nbsp;<span class="lite-blue">(954)635-5899</span></a><br/>
        <a class="heading-3col-bottombar" href="mailto:info@robkellermd.com"><i class="fi-mail"></i>amp;nbsp; EMAIL US</a> </div>
      <div id="myModal6" class="reveal-modal medium" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <h2 class="heading-1col-blue">Questions? Call Us!</h2>
        <p class="subheading-3col">We pride ourselves in excellent customer service. So ask us we are here for you! Monday - Friday (9:00 am - 5:00 pm). </p>
        <hr/>
        <p class="subheading-3col"><strong>USA:</strong>  1 954-635-5899</p>
        <p class="subheading-3col"><strong>CAN:</strong>  1 604-426-1040</p>
        <p class="subheading-3col"><strong>AUS:</strong>  61 731-235-906</p>
        <a href="mailto:info@robkellermd.com" >Email: info@robkellermd.com</a>
        <hr/>
        <a class="close-reveal-modal" aria-label="Close">amp;#215;</a> </div>
    </div>
    <div class="large-4 medium-4 small-1 columns text-center"> <a class="heading-3col-bottombar hide-for-small" href="mailto:info@robkellermd.com"><i class="fi-mail"></i>amp;nbsp; EMAIL US: info@robkellermd.com</a> </div>
    <div class="large-4 medium-4 small-5 columns text-center"> </div>
  </div>
</div>
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script> 
<script>
      $(document).foundation();
      $(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5)
        $('#myModal7').foundation('reveal', 'open'); else $('#myModal7').foundation('reveal', 'close');

});


    </script> 
<script>
    jQuery(document).ready(function($) {  

// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
    $('#preloader').fadeOut('slow',function(){$(this).remove();});
});

});
</script> 
<script type="text/javascript">
     $(document).foundation('accordion', {
  callback: function (el){
    var containerPos = $(el).parent().offset().top;
    $('html, body').animate({ scrollTop: containerPos }, 600);
  }
});
    </script> 

<!--Start of Zopim Live Chat Script--> 
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="//v2.zopim.com/?1DrZVECblMzIc6ByJZIuLAFoFu8hq227";z.t= new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script> 
<!--End of Zopim Live Chat Script--> 

<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName("script")[0];
a.src=document.location.protocol "//script.crazyegg.com/pages/scripts/0043/5957.js?" Math.floor(new Date().getTime()/3600000);
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script> 
<script type="text/javascript"><!--
document.write(decodeURI(""));//-->
</script> 
<script type="text/javascript"><!--
PostAffTracker.setAccountId('default1');
try {
PostAffTracker.disableTrackingMethod('F');
PostAffTracker.track();
} catch (err) { }
//-->
</script> 
<script id="pap_x2s6df8d" src="http://robkellermd.postaffiliatepro.com/scripts/salejs.php" type="text/javascript"> </script><script type="text/javascript">
PostAffTracker.writeCookieToLink('pap_7ty8fsk8a', 'CustomField1');
</script> 
<script>(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"5079397"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;samp;amp;s!=="loaded"amp;amp;s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");</script>
<noscript>
<img src="//bat.bing.com/action/0?ti=5079397amp;Ver=2" height="0" width="0" style="display:none; visibility: hidden;" />
</noscript>
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 973765990;
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script> 
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/973765990/?value=0amp;amp;guid=ONamp;amp;script=0"/> </div>
</noscript>
</body>
</html>