how to call a function after reveal-modal appears
<p>I am working in a foundation frame work for responsive.
on click of a link say </p>

<pre><code>&lt;a href="#" class="button" data-reveal-id="myModal"&gt;Click Me For A Modal&lt;/a&gt;

&lt;div id="myModal" class="reveal-modal" data-reveal&gt;
  &lt;h2 id="modalTitle"&gt;Awesome. I have it.&lt;/h2&gt;
  &lt;p class="lead"&gt;Your couch.  It is mine.&lt;/p&gt;
  &lt;p&gt;I'm a cool paragraph that lives inside of an even cooler modal. Wins!  &lt;/p&gt;
  &lt;a class="close-reveal-modal" aria-label="Close"&gt;&amp;#215;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>I want as the window opens the focus is given to the myModal.</p>

<p>i am trying </p>

<pre><code>$('a.button').on('click', function() {
    $("#myModal").attr("tabindex","0").focus();
 });
</code></pre>

<p>but it not working.</p>

<p>My script is running before the modal window opens and thus there is no such element available to receive focus.</p>