在Click & Callback函数上打开Foundation Callback？

Question

我是从jQueryTools Overlay迁移过来的，但我并不能真正掌握有关如何通过JavaScript点击事件打开一个显示的文档。

假设我有这样的代码：

<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中编写单击事件，如下所示：

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

但这不管用。在correct中，它的等效正确代码是什么？

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

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

Answer 1

根据属性，可以通过两种方式打开显示模式：

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

Answer 2

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

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

Answer 3

请使用以下代码

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