当前位置： 文江博客话题详情

有没有办法使我的CSS覆盖层接管整个页面？卡在iframe

发布于 2025-02-13 08:33:08 字数 5089 浏览 0 评论 0原文

我试图为我的网站创建一个不错的按钮横幅，因为文本导航使页面看起来确实很不错。

当单击三个按钮中的任何一个时，窗帘菜单都向下滑动。问题在于我正在使用Google站点，并且必须将代码嵌入到框架中。我尝试了下面的IFRAME建议，但无法使其正常工作。我可以将其显示为弹出窗口吗？

我需要窗帘菜单跳出框架并覆盖整个页面。我尝试更改位置和溢出元素，无济于事。

我是一个完整的菜鸟。我花了一个星期才能到达这一点，并试图弄清楚这个窗帘菜单已有两天了。我对此有些疲倦 - 可能是我缺少的简单的东西。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: 'Lato', sans-serif;
    }
    
    .container {
      display: flex;
      flex-flow: row nowrap;
      gap: 10px;
      justify-content: center;
      width: 100%;
      padding top: 30px
    }
    
    .overlay {
      height: 0%;
      width: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.9);
      overflow-x: auto;
      overflow: scroll;
      text-align: center;
      transition: .5s;
    }
    
    .overlay a {
      text-decoration: none;
      font-size: 24px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    
    .overlay a:hover,
    .overlay a:focus {
      color: #f1f1f1;
    }
    
    .overlay-content {
      display: flex;
      flex-direction: column;
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
    }
    
    .closebtnOverlay {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 50px !important;
    }
    
    .button {
      background-color: #FF8C00;
      border: 2px solid #338C9A;
      border-radius: 12px;
      color: white;
      width: 120px;
      height: 40px;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
      font-size: 16px;
    }
    
    .button:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    
    @media screen and (max-height: 450px) {
      .overlay a {
        font-size: 20px
      }
      .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Phoenix</a>
      <a href="javascript:void(0)">Prescott</a>
      <a href="javascript:void(0)">Scottsdale</a>
      <a href="javascript:void(0)">Tucson</a>
    </div>
  </div>
  <div id="myNav2" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Cape Coral</a>
      <a href="javascript:void(0)">Jacksonville</a>
      <a href="javascript:void(0)">Lakeland</a>
      <a href="javascript:void(0)">Miami</a>
      <a href="javascript:void(0)">Ocala</a>
      <a href="javascript:void(0)">Orlando</a>
      <a href="javascript:void(0)">Palm Beach</a>
      <a href="javascript:void(0)">Pensacola</a>
      <a href="javascript:void(0)">Port Charlotte</a>
      <a href="javascript:void(0)">Sarasota</a>
      <a href="javascript:void(0)">St. Augustine</a>
      <a href="javascript:void(0)">St. Petersburg</a>
      <a href="javascript:void(0)">Tallahasse</a>
      <a href="javascript:void(0)">Tampa</a>
    </div>
  </div>
  <div id="myNav3" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav3()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Austin</a>
      <a href="javascript:void(0)">Dallas</a>
      <a href="javascript:void(0)">Houston</a>
      <a href="javascript:void(0)">San Antonio</a>
    </div>
  </div>
  <button class="button" onclick="openNav()">Arizona</button>
  <button class="button" onclick="openNav2()">Florida</button>
  <button class="button" onclick="openNav3()">Texas</button>
  <script>
    function openNav() {
      document.getElementById("myNav").style.height = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.height = "0%";
    }

    function openNav2() {
      document.getElementById("myNav2").style.height = "100%";
    }

    function closeNav2() {
      document.getElementById("myNav2").style.height = "0%";
    }

    function openNav3() {
      document.getElementById("myNav3").style.height = "100%";
    }

    function closeNav3() {
      document.getElementById("myNav3").style.height = "0%";
    }
  </script>
</div>
</body>

</html>

原文

I'm attempting to create a decent button banner for my site because the text navigation makes the page look really wonky.

When clicking on any of the three buttons a curtain menu slides down into place. The problem is that I'm using Google Sites and the code has to be embedded within a frame. I tried the iframe suggestion below but can't get it to work properly. Can I display it as a pop-up?

I need the curtain menu to jump out of its frame and cover the entire page. I've tried changing the position and overflow elements to no avail.

I'm a complete noob. It's taken me a week to get to this point and have been attempting to figure out this curtain menu for two days. I'm a little burned out on it - probably something simple that I'm missing.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: 'Lato', sans-serif;
    }
    
    .container {
      display: flex;
      flex-flow: row nowrap;
      gap: 10px;
      justify-content: center;
      width: 100%;
      padding top: 30px
    }
    
    .overlay {
      height: 0%;
      width: 100%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.9);
      overflow-x: auto;
      overflow: scroll;
      text-align: center;
      transition: .5s;
    }
    
    .overlay a {
      text-decoration: none;
      font-size: 24px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    
    .overlay a:hover,
    .overlay a:focus {
      color: #f1f1f1;
    }
    
    .overlay-content {
      display: flex;
      flex-direction: column;
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
    }
    
    .closebtnOverlay {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 50px !important;
    }
    
    .button {
      background-color: #FF8C00;
      border: 2px solid #338C9A;
      border-radius: 12px;
      color: white;
      width: 120px;
      height: 40px;
      text-align: center;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
      font-size: 16px;
    }
    
    .button:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    
    @media screen and (max-height: 450px) {
      .overlay a {
        font-size: 20px
      }
      .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Phoenix</a>
      <a href="javascript:void(0)">Prescott</a>
      <a href="javascript:void(0)">Scottsdale</a>
      <a href="javascript:void(0)">Tucson</a>
    </div>
  </div>
  <div id="myNav2" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Cape Coral</a>
      <a href="javascript:void(0)">Jacksonville</a>
      <a href="javascript:void(0)">Lakeland</a>
      <a href="javascript:void(0)">Miami</a>
      <a href="javascript:void(0)">Ocala</a>
      <a href="javascript:void(0)">Orlando</a>
      <a href="javascript:void(0)">Palm Beach</a>
      <a href="javascript:void(0)">Pensacola</a>
      <a href="javascript:void(0)">Port Charlotte</a>
      <a href="javascript:void(0)">Sarasota</a>
      <a href="javascript:void(0)">St. Augustine</a>
      <a href="javascript:void(0)">St. Petersburg</a>
      <a href="javascript:void(0)">Tallahasse</a>
      <a href="javascript:void(0)">Tampa</a>
    </div>
  </div>
  <div id="myNav3" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav3()">×</a>
    <div class="overlay-content">
      <a href="javascript:void(0)">Austin</a>
      <a href="javascript:void(0)">Dallas</a>
      <a href="javascript:void(0)">Houston</a>
      <a href="javascript:void(0)">San Antonio</a>
    </div>
  </div>
  <button class="button" onclick="openNav()">Arizona</button>
  <button class="button" onclick="openNav2()">Florida</button>
  <button class="button" onclick="openNav3()">Texas</button>
  <script>
    function openNav() {
      document.getElementById("myNav").style.height = "100%";
    }

    function closeNav() {
      document.getElementById("myNav").style.height = "0%";
    }

    function openNav2() {
      document.getElementById("myNav2").style.height = "100%";
    }

    function closeNav2() {
      document.getElementById("myNav2").style.height = "0%";
    }

    function openNav3() {
      document.getElementById("myNav3").style.height = "100%";
    }

    function closeNav3() {
      document.getElementById("myNav3").style.height = "0%";
    }
  </script>
</div>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

伊面 2025-02-20 08:33:08

如果您使用的是IFRAME，则无法覆盖整个页面。处理情况的另一个解决方案是您可以更改iFrame样式。

<iframe src="http://www.youraddress.com" frameborder="0" style="height:100%;width:100%"></iframe>

It's not possible to cover the whole page if you are using an iframe. Another solution to handle situations is you can change the iframe style.

<iframe src="http://www.youraddress.com" frameborder="0" style="height:100%;width:100%"></iframe>
回复 原文
~没有更多了~

关于作者

赢得她心

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_aHcEbj

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

寻找我们的幸福

文章 0 评论 0

把昨日还给我

文章 0 评论 0

wj_zym

文章 0 评论 0

巴黎夜雨

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文