title: Getting foundation Modal to work right
body: <p>So I can seem to get my foundation5 modal to work right. It's popping up but only at the top of the page, so if you scroll down the page and try to trigger it it will appear as broken because its loading it at the top of the page</p>
  
  <p>The trigger is on the right side of the page that says child care search.</p>
  
  <p>Here's the code i'm using for the modal but something tells me it's not the HTML that's causing the issue</p>
  
  <pre><code>    &lt;div class="modal-btn"&gt;
      &lt;a href="#" data-reveal-id="myModal"&gt;&lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/assets/images/search-tab.png"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="myModal" class="reveal-modal medium" data-reveal="" aria-labelledby="modalTitle" aria-hidden="true" role="dialog"&gt;
      &lt;h2 id="modalTitle"&gt;With over 400 Child Care Aware centers across the United States we are here to help you find the right care for your child. To locate a center near you use the search below:&lt;/h2&gt;
  
      &lt;ul class="tabs" data-tab=""&gt;
          &lt;li class="tab-title active"&gt;&lt;a href="#panel1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="tab-title"&gt;&lt;a href="#panel2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="tab-title"&gt;&lt;a href="#panel3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
  
          &lt;li class="tab-title"&gt;&lt;a href="#panel4"&gt;Tab 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="tabs-content"&gt;
          &lt;div class="content active" id="panel1"&gt;
              &lt;p&gt;This is the first panel of the basic tab example. You can place all sorts of content here including a grid.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="content" id="panel2"&gt;
              &lt;p&gt;This is the second panel of the basic tab example. This is the second panel of the basic tab example.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="content" id="panel3"&gt;
              &lt;p&gt;This is the third panel of the basic tab example. This is the third panel of the basic tab example.&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="content" id="panel4"&gt;
              &lt;p&gt;This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;a class="close-reveal-modal" aria-label="Close"&gt;&amp;#215;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the only added CSS I have for this.</p>
  
  <pre><code>.modal-btn {
      position: fixed;
      right: 0;
      top: 42%;
      z-index: 999;
      -webkit-transform: translateZ(0);
  }
  
  .reveal-modal {
      background-color: #f1a026;
      border: none;
  }
  
  .reveal-modal .close-reveal-modal {
      color: #fff;
      font-size: 30px;
      font-weight: 700;
      line-height: 1;
      top: -12px;
      right: -10px;
      background: #f1a026;
      border-radius: 50%;
      height: 35px;
      width: 35px;
      text-align: center;
  }
  
  h2#modalTitle {
      color: #fff;
      font-size: 19px;
      font-weight: 400;
  }
  </code></pre>
  
  <p>I have this loading in the header.php since I need it to load on every page.</p>
  
  <p>Have you guys ever run into any problems like this?</p>
  
  <p><a href="http://www.usachildcareaware.org.php53-11.dfw1-1.websitetestlink.com/" rel="nofollow">http://www.usachildcareaware.org.php53-11.dfw1-1.websitetestlink.com/</a></p>