代码之家 › 专栏 › 技术社区 › Shankar Panda
Html Modal在chrome中打开良好,但在firefox中不打开

modal-dialog css html
Shankar Panda · 技术社区 · 3 年前
我的html代码在chrome中运行良好,但在firefox中则不然。当您单击“查看更多”[模态]查看描述时,会出现问题。我把问题缩小到了模态css属性。当我将位置从固定更改为相对时,firefox可以工作,但会干扰其他样式组件。你能在这里帮忙吗。
https://testhtmlcode.w3spaces.com/saved-from-Tryit-2023-01-02.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popoup in javascript</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      text-decoration: none;
      list-style: none;
      outline: none;
      font-family: 'system-ui', 'sans-serif';
      font-weight: 300;
      transition: .3s linear 0s all;
    }
    
    .container {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: left;
      align-items: left;
      flex-wrap: wrap;
      margin: 40px 0;
    }
    
    .container .card {
      position: relative;
      width: 300px;
      height: 400px;
      background: url(https://images.pexels.com/photos/3747155/pexels-photo-3747155.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat;
      background-size: cover;
      margin: 20px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(10px);
      overflow: hidden;
    }
    
    .container .card .content {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: 0.5s;
    }
    
    .container .card:hover .contentBx {
      transform: translateY(-20px);
    }
    
    .container .card .content .contentBx h2 {
      color: #000000;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 500;
      font-size: 18px;
      text-align: center;
      margin: 20px 0 10px;
      line-height: 1.1em;
    }
    
    .container .card .content .contentBx p {
      color: #ffffff;
      letter-spacing: 2px;
      font-weight: 500;
      font-size: 14px;
      text-align: left;
      margin: 20px 0 10px;
      line-height: 1.1em;
      padding-left: 15px;
    }
    
    .container .card .sci {
      position: absolute;
      bottom: 50px;
      display: flex;
    }
    
    .container .card .sci li {
      list-style: none;
      margin: 0 10px;
      transform: translateY(40px);
      transition: 0.5s;
      opacity: 0;
    }
    
    .container .card:hover .sci li {
      transform: translateY(0px);
      opacity: 1;
    }
    
    .container .card .sci li a {
      color: #000000;
      font-size: 20px;
    }
    
    .blur-filter {
      filter: blur(2px);
    }
  </style>
  <style>
    [modal] {
      opacity: 0;
      position: fixed;
      top: 120%;
      bottom: 0;
      left: 0;
      right: 0;
      color: white;
      background: #ffffff38;
      backdrop-filter: blur(10px);
      overflow: hidden;
      transition: 1s linear 0s all;
    }
    
    [modal="active"] {
      opacity: 1;
      top: 0%;
    }
    
    [modal]>.modal {
      display: contents;
    }
    
    [modal]>.flexbox_column {
      margin: 0;
    }
    
    [modal]>.modal>.modal_header {
      display: grid;
      grid-template-columns: auto 24px;
      padding: 10px;
    }
    
    [modal]>.modal>.modal_header>h4 {
      font-weight: 500;
    }
    
    [modal]>.modal>.modal_header>._close {
      cursor: pointer;
    }
    
    [modal]>.modal>.modal_content {
      height: 100%;
      padding: 10px;
      border-radius: 16px;
      overflow: scroll;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar {
      width: 5px;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar-track {
      background: #e2e2e2;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar-thumb {
      background: #9a9a9a;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar-thumb:hover {
      background: #b6b6b6;
    }
    
    [modal]>.modal>.modal_content>img {
      max-width: 100%;
      object-fit: cover;
      filter: opacity(0.8);
    }
    
    [data-modal] {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div>
    <section>
      <div class="container">
        <!--CARD START-->
        <div class="card">
          <div class="content">
            <div class="contentBx">
              <h2>PR1</h2>
              <p>
                PR1 is a health related tracker..
                <a data-modal>See more</a>
              </p>
            </div>
            <!--MODAL START-->
            <div modal>
              <div class="modal flexbox_column">
                <div class="modal_header">
                  <h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
                <div class="modal_content">
                  <p>
                    Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
                    dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
                    qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
                  </p>
                  <p>
                    Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
                    dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
                    qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
                  </p>
                  <img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
                </div>
              </div>
            </div>
            <!--MODAL END-->
          </div>
        </div>
        <!--CARD END-->
        <!--CARD START-->
        <div class="card">
          <div class="content">
            <div class="contentBx">
              <h2>PR1</h2>
              <p>
                PR1 is a health related tracker..
                <a data-modal>See more</a>
              </p>
            </div>
          </div>
          <!--MODAL START-->
          <div modal>
            <div class="modal flexbox_column">
              <div class="modal_header">
                <h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
              <div class="modal_content">
                <p>
                  Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
                  dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
                  qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
                </p>
                <p>
                  Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
                  dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum
                  qui sint voluptatem. Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
                </p>
                <img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
              </div>
            </div>
          </div>
          <!--MODAL END-->
        </div>
        <!--CARD END-->
      </div>
    </section>
  </div>
</body>
<script>
  let modalLinks = document.querySelectorAll('a[data-modal]');
  modalLinks.forEach(link =>
    link.addEventListener('click', function() {
      openModal(link)
    })
  );

  function openModal(e) {
    const el = e.closest('.card');
    const modal = el.querySelector('[modal]');
    modal.setAttribute('modal', 'active');
  }

  function closeModal(e) {
    const modal = e.closest('[modal]');
    modal.setAttribute('modal', '');
  }
</script>

</html>
0 回复 | 直到 3 年前