时间戳

首页 > 解决方案 > Zurb Foundation 6 显示无法触发事件，然后是关闭事件

zurb-foundation - Zurb Foundation 6 显示无法触发事件，然后是关闭事件

问题描述

在弹出窗口关闭后，我们会提醒一条消息。这在基础 4 上运行良好，现在我正在尝试升级到基础 6，但它未能触发事件，然后关闭弹出窗口。

基础 4（工作原型）：

         $(document).ready(function() {
            $(document).foundation();
			$('#reveal_trigger').on("click", function() {
			
				$('#reveal_modal').foundation("reveal","open");
			})
			
			$('#close_trigger').on("click", function() {
				$('#reveal_modal').foundation("reveal","close").one('closed', function ()
					{
						alert("closed");
					});
			});

         })
<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie=edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
      
      <title>Reveal Basics</title>
      
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/css/foundation.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/4.2.3/js/foundation.min.js"></script>
	  
   </head>

   <body>
      <h2>Reveal Basics Example</h2>  
	  <!--<p><a data-reveal-id="reveal_modal">Click Me For A Modal</a></p>-->
      <p><a id="reveal_trigger">Click Me For A Modal</a></p>

	  <div class="reveal-modal" id="reveal_modal" data-reveal>
	    <h2>Foundation 4</h2>
	    <p>Foundation is a family of responsive front-end frameworks that make 
         it easy to design beautiful responsive websites, apps and emails
         that look amazing on any device! 
   		 <a id="close_trigger">Click to close</a>
	    </p>
		
        <button type="button" class="close-reveal-modal" aria-label="Close reveal">
            <span aria-hidden="true">×</span>
        </button>
	  </div>

   </body>
   
</html>

基础 6（失败的原型）：

         $(document).ready(function() {
            $(document).foundation();
			$('#reveal_trigger').on("click", function() {
			
				$('#reveal_modal').foundation("open");
			});
			
			$('#close_trigger').on("click", function() {
				$('#reveal_modal').foundation("close").one('closed', function ()
					{
						alert('closed');
					});
			});
         })
<!doctype html>
   <head>
      <meta charset = "utf-8" />
      <meta http-equiv = "x-ua-compatible" content = "ie=edge" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
      
      <title>Reveal Basics</title>
      
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.css">
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
   </head>

   <body>
      <h2>Reveal Basics Example</h2>
      <!--<p><a data-open="reveal_modal">Click Me For A Modal</a></p> -->
    
	  <p><a id="reveal_trigger">Click Me For A Modal</a></p>
	  
      <div class="reveal" id="reveal_modal" data-reveal data-animation-in="slide-in-down" data-animation-out="slide-out-up">
        <h2>Foundation 6</h2>
        <p>Foundation is a family of responsive front-end frameworks that make 
         it easy to design beautiful responsive websites, apps and emails
         that look amazing on any device.
		 <a id="close_trigger">Click to close</a>
        </p>
         
        <button type="button" class="close-button" aria-label="Close reveal" data-close>
            <span aria-hidden="true">×</span>
        </button>
      </div>
   </body>
   
</html>

与基础 6 相同的代码在关闭后无法触发事件。

标签： zurb-foundationzurb-foundation-6

解决方案

事件发生了变化。从 4 升级到 6 是两个主要的破坏版本。

现在是open.zf.revealand closed.zf.reveal，请参阅https://foundation.zurb.com/sites/docs/reveal.html#js-events

方法是.foundation('close')，见https://foundation.zurb.com/sites/docs/reveal.html#close

一般来说你应该使用Foundation 6.5 / latest。文档适用于这个版本，而不是 6.0。许多事情都发生了变化，包括 6.x 中的重大变化。

推荐阅读