时间戳

首页 > 解决方案 > 我的引导模式默认打开/损坏

html - 我的引导模式默认打开/损坏

问题描述

我是一位经验不足的开发人员，在单击“信息”按钮时，引导模式应该滑下页面的整个宽度。直到几天前它工作正常，但我不确定是什么导致了这个问题。我正在学习 git，所以将来我可以恢复到以前的版本。

这是网站：deannoble.com.au

这是应该打开模式的按钮：


    <span onclick="openNav()">
      <button type="button" data-toggle="modal" data-target=".bd-example-modal-xl">
        <a class="btn btn-primary" class="closebtn" onclick="closeNav()" href="../website/index.html" href="javascript:void(0)" data-toggle="modal" data-target=".bd-example-modal-xl">Info</a>
      </button>
    </span>

这是模态中的内容：


    <div class="container over" href="javascript:void(0)" class="closebtn" onclick="closeNav()">
      <div id="myNav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
          <div class="row d-flex justify-content-center">
            <div class="col-lg-8">
              <h2 class="overlay-text">Hello  </h2>
              <h2 class="overlay-text">I'm a Melbourne-based UX/UI designer and also a pretty decent amateur baker.</h2>
            </div>
          </div>
        </div>
      </div>
    </div>

这是CSS 

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: rgba(205, 178, 255, 0.95);
  overflow-y: hidden;
  transition: 1.2s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
}

.overlay a {
  text-decoration: none;
  font-size: 2rem;
  color: #4e3380;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: black;
}

.overlay .closebtn {
  position: absolute;
  top: 1rem;
  font-size: 2rem;
}

@media screen and (max-height: 450px) {
  .overlay {
    overflow-y: auto;
  }
  .overlay a {
    font-size: 20px;
  }
  .overlay .closebtn {
    font-size: 2rem;
    top: 1rem;
    right: 2rem;
  }
}

h2.overlay-text {
  color: #4e3380;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}```

任何帮助都会很棒。

标签： htmlcsstwitter-bootstrap

解决方案

问题是您的缓存，只需将其删除即可。

推荐阅读