Question

我对html编码非常陌生（5/6周），但遇到问题时遇到了问题。我希望能够单击一个图像，而不是打开一个新页面，而是将图像或嵌入式视频加载到浮动页面中（该页面的名称正确），该页面会加载到现有页面的顶部页面。

我已经找到了几个例子（下面有一个链接），但我仍然感到困惑。它只是我需要的main.css中的代码还是我也需要javascript等。我已经尝试过复制几段css代码，但是没有成功。似乎总是像在下面提供的示例中一样，打开一个新页面，而不是一个浮动页面。

示例：https://html5up.net/parallelism

当您在上述站点中单击图像时，它会以我希望理解的方式打开/弹出一个浮动框（再次抱歉，您不知道它的名称）。我真的很想使用这种技术，因为我的网站将是大量的图像和视频。我觉得这种方法将是一种更加专业的方式来显示我的信息和图像。

如果有人可以提供帮助，我很乐意确切地了解实现此目标所需要做的事情。可能只有5/6周，但我觉得我学到了很多东西。我想保持自己的技能，使我完全可以自己维护这个网站。

提前感谢大家

Al。

Answer 1

以下是基于框架的模式的说明-Getbootstrap Modal

以下是非框架模式-

body {
  width: 100%;
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
  margin: 20px auto;
  font-size: 25px;
  text-decoration: none;
  text-shadow: 1px 1px 0px #fff;
  font-weight: 400;
  color: #666;
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 5px 10px;
  position: relative;
  width: 150px;
  top: 50px;
  background: #eee;
  display: block;
  text-align: center;
  box-shadow: 1px 1px 1px #fff;
  -moz-box-shadow: 1px 1px 1px #fff;
  -webkit-box-shadow: 1px 1px 1px #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.button:hover {
  color: #333;
  background: #eeffff;
  -moz-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.modalbg {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 99999;
  -moz-transition: all 2s ease-out;
  -webkit-transition: all 2s ease-out;
  -o-transition: all 2s ease-out;
  transition: all 2s ease-out;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -transition-delay: 0.2s;
  display: block;
  pointer-events: none;
}
.modalbg .dialog {
  width: 400px;
  position: relative;
  top: -1000px;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #ccc);
  background: -webkit-linear-gradient(#fff, #ccc);
  background: -o-linear-gradient(#fff, #ccc);
  box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
  display: block;
  pointer-events: auto;
  background: rgba(4, 10, 30, 0.8);
  -moz-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
  top: -20px;
  -moz-transition: all 0.8s ease-out;
  -webkit-transition: all 0.8s ease-out;
  -o-transition: all 0.8s ease-out;
  transition: all 0.8s ease-out;
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -transition-delay: 0.4s;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -transition-delay: 0.2s;
}

.close:hover {
  background: #00d9ff;
  -moz-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.fineprint {
  font-style: italic;
  font-size: 10px;
  color: #646;
}
a {
  color: #333;
  text-decoration: none;
}

<a class="button" href="#openModal">Open Me!</a>

<div id="openModal" class="modalbg">
  <div class="dialog">
    <a href="#close" title="Close" class="close">x</a>
  	<h2>You did it!</h2>
		<p>Below is a picture.</p>
    <img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
	</div>
</div>

图片/视频链接在页面顶部打开

1 个答案: