Question

单击this page顶部的“客户端登录”链接时，应显示显示模式。它的HTML肯定是正确的，所以脚本一定是错误的。

在页面顶部，我有以下脚本/链接：

<!-- 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/foundation-sites@6.5.3/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/foundation-sites@6.5.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>

Foundation说要使用压缩的CSS和JavaScript。

我最初是使用foundation-cli创建的项目，但是无法部署，因此我将所有静态文件/缩小的CSS复制到了这个新的GitHub存储库中，并与GitHub Pages一起发布，没有问题：https://github.com/nataliecardot/zeus-hosting 如果我不能简单地使用CDN链接来使显示模式正常工作，也许我可以从original project's repo（通过运行foundation new创建）中复制所需的文件。

这是显示模式的HTML，尽管我知道它是正确的：

<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>

Answer 1

脚本必须并且应该始终位于<body>的{{1}}末尾。

基础显示模态不会打开

1 个答案: