在点击和回调函数上打开 Foundation Reveal？答案

【问题标题】：Opening Foundation Reveal on Click & Callback Functions?在点击和回调函数上打开 Foundation Reveal？
【发布时间】：2013-03-21 07:04:52
【问题描述】：

我正在从 jQueryTools Overlay 迁移，我无法真正掌握有关如何通过 JavaScript 单击事件打开 Reveal 的文档。

假设我有这个代码：

<a href="#revealModal" class="revealTrigger">Click Me For A Modal</a>
<div id="revealModal" class="reveal-modal">
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
</div>

通常，我在 jQueryTools Overlay 中对 click 事件进行编码，如下所示：

$('.revealTrigger').click(function() {
    $('#revealModal').reveal();
});

但这不起作用。 Reveal 中对应的正确代码是什么？

那么回调事件呢？我可以这样写吗：

$('.revealTrigger').click(function() {
    $('#revealModal').reveal({
        open: function(){
            // prepare some stuff before showing
        },
        opened: function(){
            // execute stuff prepared by open function
        },
    });
});

【问题讨论】：

标签： modal-dialog zurb-foundation

【解决方案1】：

Reveal modal 可以通过属性以两种方式打开：

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
 <div id="myModal" class="reveal-modal">
      <h2>Awesome. I have it.</h2>
      <p class="lead">Your couch.  It is mine.</p>
      <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
      <a class="close-reveal-modal">&#215;</a>
    </div>

或通过javascript：

<a class="large button" onclick="javascript:showModal();" href="#">Show Modal</a>

<script>
     $('#myModal').foundation('reveal', {
          opened: function () {
              alert('The couch was stolen!');
          },
          closed: function () {
              alert("Now it's yours again");
          }
     });
     $(document).foundation();
     function showModal() {
         $('#myModal').foundation('reveal', 'open');          
     }
</script>

【讨论】：

回调事件怎么样？
查看我更新的答案，有人刚刚告诉我，要使配置正常工作，重要您必须在 foundation init 之前先进行设置($(document).foundation();)
它有效，但我决定使用另一个插件。它似乎不能做我想要的。

【解决方案2】：

您还可以绑定打开、打开、关闭和关闭事件。

#CoffeeScript
$("div[class$='-modal']").on "opened", ->
  console.log "howdy"

【讨论】：

【解决方案3】：

请使用以下代码

   $('#modal_id').bind('closed', function() {
     console.log("myModal closed!");
   });

【讨论】：