时间戳

首页 > 解决方案 > 到中心的 Gif 链接

tags - 到中心的 Gif 链接

问题描述

试图让“关于我们”不要转到单独的页面，而只是转到屏幕的中心。

  <div class="w3-col s4">
    <h4>About</h4>
    <p><a href="https://www.linkpicture.com/q/unnamed_10.gif">About us</a></p>
    <p><a href="#">Shipping</a></p>
    <p><a href="#">Payment</a></p>
  </div>

标签： tagsanimated-gif

解决方案

你需要一些不同的方法。

该标签定义了一个超链接，用于从一个页面链接到另一个页面。因此，单击将您带到另一个页面是一种正常行为。但这不是你想要的。要显示弹出窗口，您可以使用 javascript。

您可以使用不同的方法，例如 Bootstrap Modals、jQuery 或 W3C.CSS Modals。我明白了，您使用 W3C.CSS 中的类。您可以在此处阅读有关 W3C.CSS 模态的信息。

您也可以使用纯 JS。我在这里展示的正是这种方法。基本上，想法如下。您有一个隐藏的组件样式，以便它出现在屏幕的中心（如模式）。默认情况下，模式是隐藏的。有一个 JS 函数可以使模态可见。单击您的链接会触发此功能。看看下面的代码。

function showGif() {
  document.getElementById('box').classList.remove('hidden');
}
.box {
  display: flex; /* defines a flex container */
  align-items: center; /* aligns content vertically */
  justify-content: center; /* aligns items horizontally */
  height: 100vh; /* makes the block fit all the viewport's width */
  width: 100vw; /* makes the block fit all the viewport's height */
  position: absolute; /* needs to overlay other elements */
}

.hidden {
  display: none;
}
<div class="w3-col s4">
  <h4>About</h4>
  <p><a href="#" onclick="showGif();">About us</a></p>
  <p><a href="#">Shipping</a></p>
  <p><a href="#">Payment</a></p>
</div>

<div id="box" class="box hidden">
  <img src="https://www.linkpicture.com/q/unnamed_10.gif" />
</div>

我没有实现隐藏模态的功能。而且 CSS 可能并不完美。这只是向您展示这个想法的一个例子。因此，最终的实施取决于您。我希望，它会有所帮助。

推荐阅读