modal-dialog - 在点击和回调函数上打开 Foundation Reveal？

Question

我正在从 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
        },
    });
});

Answer 1

可以通过两种方式打开 Reveal 模式，按属性：

<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!");
   });