时间戳

首页 > 解决方案 > 由于 CSS 的问题，没有出现弹出窗口

html - 由于 CSS 的问题，没有出现弹出窗口

问题描述

我正在尝试重现此页面中的弹出窗口。但是，当我将此代码添加到我的页面时，什么都没有显示。如果我开始查看 Adob​​e Dreamweaver 中的 CSS 文件，CSS 文件中有很多错误。我怀疑这就是我加载页面时没有显示弹出窗口的原因。附上一张有一些问题的图片。在第 860 行，它期待一个 RBRACE。在第 869 行，错误是“意外的令牌 &”。在第 873 行，它是意外的标记 }。稍后会出现相同的错误。当我分析codepen.io中的代码时没有问题，所以我不明白问题出在哪里。

这是我到目前为止的代码：

在 html 文件中：

<div id="popup1" class="overlay">
    <div class="popup">
        <h2>Info box</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
            <p>This is done totally without JavaScript. Just HTML and CSS.</p>
        </div>
    </div>
</div>

然后在同一个 html 文件中：

  <script>
    $(window).load(function () {
        $('.overlay').show();       
        $('.popup').show();
    });
</script>

在 CSS 文件中：

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
    transition: opacity 200ms;
  visibility: hidden;
    opacity: 0;
    &.light {
    background: rgba(255,255,255,0.5);
  }
  .cancel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
  }
  &:target {
    visibility: visible;
    opacity: 1;
  }
}

.popup {
    margin: 75px auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #666;
    width: 300px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    position: relative;
  .light & {
    border-color: #aaa;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  h2 {
    margin-top: 0;
    color: #666;
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
  }
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
    opacity: 0.8;
    transition: all 200ms;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #666;
    &:hover {
      opacity: 1;
    }
  }
  .content {
    max-height: 400px;
    overflow: auto;
  }
  p {
    margin: 0 0 1em;
    &:last-child {
      margin: 0;
    }
  }
}

在此处输入图像描述

标签： htmlcsspopuppopupwindow

解决方案

首先，codepen 正在使用SCSS转换为CSS然后它的工作。因此，如果您直接将其用作 CSS，它将不起作用并给出错误。您需要一些预处理器将 SCSS 处理为 CSS，然后使用它。

例如这是 SCSS 语法（在 codepen 中）

overlay {
  background: red;
  opacity: 0;
  &:target {
    opacity: 1;
  }
}

它被转换为以下 CSS（实际上正在被使用）

overlay {
  background: red;
  opacity: 0;
}
overlay:target {
  opacity: 1;
}

因此，您不能在不处理的情况下直接在 html 中使用前者。

其次，codepen 的工作方式是使用 href 的内部链接属性。您通过 href 创建一个内部链接，然后当用户单击该链接时，target将属性添加到覆盖先前编写的 CSS 的覆盖类中。

已尝试为您部分修复它：

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}
/* Have fixed the CSS till here and so basic example is working fine now */

.popup {
  margin: 75px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #666;
  width: 300px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  position: relative;
  .light & {
    border-color: #aaa;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }
  h2 {
    margin-top: 0;
    color: #666;
    font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
  }
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    right: 20px;
    opacity: 0.8;
    transition: all 200ms;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #666;
    &:hover {
      opacity: 1;
    }
  }
  .content {
    max-height: 400px;
    overflow: auto;
  }
  p {
    margin: 0 0 1em;
    &:last-child {
      margin: 0;
    }
  }
}
<a href="#popup1">Click Me</a>
<div id="popup1" class="overlay">
  <div class="popup">
    <h2>Info box</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
      <p>This is done totally without JavaScript. Just HTML and CSS.</p>
    </div>
  </div>
</div>

您也可以使用 javascript 实现相同的目的，但需要您编写的代码以外的代码。

希望能帮助到你。回复有任何疑问！

推荐阅读