当您单击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">×</span>
</button>
</form>
</div>
脚本必须并且应该始终在<body>
的末尾,就在</body>
之前。