Foundation reveal modal won't open

Question

When you click the "client login" link at the top of this page, the reveal modal should appear. The HTML for it is correct for sure, so a script must be wrong.

In the head of my page, I have these scripts/link:

<!-- jQuery in case needed for Foundation -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Foundation CDN Links -->
    <!-- Compressed CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">

    <!-- Compressed JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>

The compressed CSS and JavaScript are what Foundation says to use.

I created the project with foundation-cli originally but am unable to deploy, so I copied all the static files/minified CSS into this new GitHub repo and published with GitHub Pages without issue: https://github.com/nataliecardot/zeus-hosting If I can't simply use CDN links for the reveal modal to work, maybe I could copy the needed files from the original project's repo (created by running foundation new).

Here's the HTML of the reveal modal, although I know it's correct:

<div class="reveal login-modal" id="loginModal" data-reveal>
      <h1 class="h3">Client Login</h1>
      <form>
        <label><input type="text" placeholder="Username"></label>
        <label><input type="password" placeholder="Password"></label>
        <div class="login-bottom-group">
          <button class="button" type="submit">Login</button>
          <div class="login-couple">
            <span>Remember Me</span>
            <div class="switch">
              <input class="switch-input" id="rememberSwitch" type="checkbox" name="rememberSwitch">
              <label class="switch-paddle" for="rememberSwitch">
                <span class="show-for-sr">Remember Me</span>
              </label>
            </div>
          </div>
        </div>
        <button class="close-button" data-close aria-label="Close modal" type="button">
          <span aria-hidden="true">&times;</span>
        </button>
      </form>
    </div>

Hi, please use the zurb-foundation tag next time, foundation is a macOS framework =) — Daniel Ruf
I added these script links and files from the original project created by running foundation new and the modal is now opening: <script src="node_modules/foundation-sites/dist/js/foundation.js"></script> as well as the file <script src="js/app.js"></script> — nCardot

Daniel Ruf Daniel Ruf · Accepted Answer · 2019-10-15T05:17:40

0

votes

Scripts have to be and should always be at the end of <body>, right before </body>.

Foundation reveal modal won't open

1 Answers