zoukankan      html  css  js  c++  java
  • css实现弹出框

    弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的。其实就是用到了css里面的一个:target选择器+visibility属性。

    URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

    示例代码:

    <div class="container">
      <a href="#popup" class="button">删除</a>
      <div class="popup" id="popup">
        <div class="popup-inner">
          <div class="popup__text">
            <h3>删除宝贝</h3>
            <p>确定要删除该宝贝吗?</p>
            <p><span><a href="javascript:void(0)">确定</a></span><span><a href="#">关闭</a></span></p>
          </div>
          <a href="#" class="popup__close">&times;</a>
        </div>
      </div>
    </div>
    
    scss代码:
    $main-color: #9191E9;
    
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    
    html, body {
      font-family: 'Raleway', sans-serif;
      font-size: 16px;
    }
    
    .container {
      background-color: $main-color;
      display: flex;
      align-items: center;
      justify-content: center;
       100vw;
      height: 100vh;
    }
    
    .button {
      text-decoration: none;
      font-size: .875rem;
    }
    
    .popup {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      right: 0;
       100vw;
      height: 100vh;
      z-index: 2;
      visibility: hidden;
      &-inner {
        background-color: #fff;
         400px;
        height: 180px;
        display: flex;
        align-items: center;
        position: relative;
        bottom: -100vw;
        right: -100vh;
        transform: rotate(32deg);
        transition: .64s ease-in-out;
      }
      &__text {
        padding: 2rem;
        h3 {
          font-size: 1.2rem;
          font-weight: 600;
          margin-bottom: 1.2rem;
        }
        p {
          font-size: .75rem;
          margin-top: 1rem;
        }
        span {
          display: inline-block;
          padding: .42rem 1rem;
          margin-right: .625rem;
          a {
            text-decoration: none;
          }
          &:first-child {
            background-color: #52A0E5;
            border: 1px solid #52A0E5;
            a {
              color: white;
              &:hover {
                text-decoration: underline;
              }
            }
          }
          &:last-child {
            border: 1px solid grey;
            a {
              color: grey;
              &:hover {
                color: red;
                text-decoration:underline;
              }
            }
          }
        }
      }
      &__close {
        position: absolute;
        right: 1.8rem;
        top: 1.8rem;
        font-size: 1.5rem;
        color: grey;
        text-decoration: none;
        font-weight: 800;
      }
      &:target {
        visibility: visible;
        .popup-inner {
          bottom: 0;
          right: 0;
          transform: rotate(0);
        }
      }
    }
    

    scss代码有点略长,核心就是.popup:targetvisibility的结合,为什么不用opcaity和display呢?在这个场景中,opacity会影响html页面里的锚(这里面的popup遮挡到了body里面的a标签),而display不支持transition,并使transition失效。这里为了让弹出框不那么突兀地出现,加了一个小小的动画效果。

  • 相关阅读:
    Proj THUDBFuzz Paper Reading: PMFuzz: Test Case Generation for Persistent Memory Programs
    入围 WF 后训练记
    算法竞赛历程
    2021 多校 杭电 第十场
    2021 多校 杭电 第九场
    2021 多校 牛客 第十场
    2021 多校 牛客 第九场
    2021 多校 杭电 第八场
    2021 多校 杭电 第六场
    2021 多校 杭电 第七场
  • 原文地址:https://www.cnblogs.com/sunshine21/p/10280270.html
Copyright © 2011-2022 走看看