Question

当我点击链接时，我希望您的帮助将iframe放在网页的输入处。

首先加载页面时，我想显示链接名称，当我点击第一个链接时，应该显示一个div（应该覆盖整个桌面），在该div中我想在我的中间显示我的iframe div。

有人可以帮助我如何实现这个目标吗？

我的问题是，iframe始终显示在左上角，我无法看到链接名称。如何在中心显示iframe。

以下是我试过的代码：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css">
<script type="text/javascript" src="myJS.js"></script>
</head>
<body>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U8')">Video 1</a><br/>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U9')">Video 2</a><br/>
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U5')">Video 3</a><br/>
<div id="showVideo" style="display:none;">
<iframe id="video1" width="475" height="331" frameborder="0" style="background: black;"></iframe></div>
</body>
</html>

以下是我的CSS：

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: lightblue;
}

div#showVideo
{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: url("1.png");
}

iframe#video1
{
  margin: 0px auto;
}

以下是JS：

function playMe(vidCode) {
    var iDiv = document.querySelector('#showVideo');
    var iFrame=document.querySelector('#video1');
    iDiv.style.display = "block";
    iFrame.src = "http://www.youtube.com/embed/" + vidCode;
};

JSFiddle

这个问题不只是将我的iframe置于中心位置。

Answer 1

看看这是否有帮助，如果没有，你可以创建一个jsfiddle，以便我们可以测试它吗？

div#showVideo {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: url("1.png");
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

并检查图像的网址是否正确，并再次创建一个jsfiddle。

如何将div和框架放在页面的中心

1 个答案: