title: JavaScript modal
body: <p>I have a WordPress site loading a JS file named <code>script.js</code>, which is loaded always. In that file I have this function:</p>
  <pre><code>$(document).ready(function() {
    $(&quot;button.demo-2&quot;).on(&quot;click&quot;, function (e) {
      var options = {
        width: &quot;1200px&quot;,
        height: &quot;100%&quot;,
        closeCross: true,
        escapeKey: true,
        beforeOpen: function () {
          $(&quot;body&quot;).addClass(&quot;popupOpened&quot;)
        },
      };
      e.preventDefault();
      $(this).simplePopup({type: &quot;html&quot;, htmlSelector: &quot;#myPopup&quot;});
    });
  });
  </code></pre>
  <p>The HTML code for the page <code>/product/experience</code>:</p>
  <pre><code>&lt;button href=&quot;#&quot; class=&quot;button demo-2&quot;&gt;Más info&lt;/button&gt;
  &lt;div id=&quot;myPopup&quot;&gt;
      &lt;h2&gt;&lt;?php _e( 'More information about', 'exp-theme' ); ?&gt;&lt;/h2&gt; 
      &lt;h3&gt;&lt;?php the_title( ); ?&gt;&lt;/h3&gt;
      &lt;?php 
          if(ICL_LANGUAGE_CODE == &quot;es&quot;){
              echo do_shortcode('[contact-form-7 id=&quot;705&quot; title=&quot;+Info experiencias&quot;]');
          }else{
              echo do_shortcode('[contact-form-7 id=&quot;40&quot; title=&quot;Contacto&quot;]');
          }
      ?&gt;
  &lt;/div&gt;
  </code></pre>
  <p>If I load that page directly, the modal works correctly. But if I'm in the home and go to <code>/product/experience</code>, the modal is not working until I reload <code>/product/experience</code>.</p>
  <p>I don't know which is the better approach. Load the function only in this page? Maybe use another way to do it instead <code>$(document).ready</code>?</p>