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

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

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

开放基金会揭示Click＆amp;回调函数？

3 个答案: