基础显示模式不会打开

问题描述 投票:0回答:1

当您单击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/[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>

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>
zurb-foundation
1个回答
0
投票

脚本必须并且应该始终在<body>的末尾,就在</body>之前。

© www.soinside.com 2019 - 2024. All rights reserved.