RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 839531
Accepted
ZELIBOBA
ZELIBOBA
Asked:2020-06-08 22:33:11 +0000 UTC2020-06-08 22:33:11 +0000 UTC 2020-06-08 22:33:11 +0000 UTC

模态窗口的问题

  • 772

这是一个模态窗口:

var num = 15;

var modalBtn = document.querySelector('.open');
var closeBtn = document.querySelector('.close');

var modalContainer = document.querySelector('.modals');
var holdModals = document.createDocumentFragment();

for (var i = 0; i < num; i++) {
  var div = document.createElement('div');
  div.classList.add('modal-drop');
  div.style.top = Math.floor((Math.random() * 100)) + 'vh';
  div.style.left = Math.floor((Math.random() * 100)) + 'vw';
  div.style.transitionDelay = Math.random() + 's';
  holdModals.appendChild(div);
}
console.log();
modalContainer.appendChild(holdModals);

modalBtn.addEventListener('click',function(){
  modalContainer.style.display = 'block';  
  window.setTimeout(function(){
    modalContainer.classList.add('active');
  },0.1);
});

closeBtn.addEventListener('click',function(){
   modalContainer.classList.remove('active');
  
   window.setTimeout(function(){
    modalContainer.style.display = 'none';
  },3000);
});
.card {
  position: relative;
}

.modals {
  color: #fff;
  display: none;
  position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  
  &.active {    
    .modal-drop {
      transform-origin: 50%;
      transform: scale(1);
    }
    
    .modal-content {
      opacity: 1;
      transition: 0.5s ease-in 1.5s;
    }
  }
}

.modal-drop {
  background: hsl(250,30%,10%);
  border-radius: 50%;
  width: 150vh;
  height: 150vh;
  position: absolute;
  margin-left: -75vh;
  margin-top: -75vh;
  transition: transform 2s cubic-bezier(.25,1,.60,1), transform-origin 0s;
  transform: scale(0.001);
  transform-origin: 0 0;
}

.modal-content {
  background: hsl(250,30%,10%);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  transition: 0.5s 0s;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-wrap {
  flex: 1;
  width: 100%;
  max-width: 50em;  
}

/* Page Styling */

$font-size: 18/16*1em;

::selection {
  background: hsl(40,100%,65%);
  color: #fff;
}

::-moz-selection {
  background: hsl(40,100%,65%);
  color: #fff;
}

html, body {
  height: 100%;
}

body {
  background: hsl(30,10%,90%);
  color: hsl(200,50%,20%);
  font: #{$font-size}/1.65 'Open Sans', sans-serif;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: #fff;
  flex: 1;
  max-width: 20em;
  padding: 3em;
  position: relative;
  width: 100%;
  
  &::before {
    content: '';
    border: 1px dotted hsl(165,80%,70%);
    position: absolute;
      top: 1.25em;
      right: 1.25em;
      bottom: 1.25em;
      left: 1.25em;
    pointer-events: none;
  }
  
  p {
    margin: 0.5em 0 1em;
    padding-bottom: 2em;
    border-bottom: 1px solid hsl(149,70%,90%);
    //text-align: center;
    //font-style: italic;
    //font-family: 'Playfair Display', serif;
  }
}

.open,
.close {
  background: linear-gradient(hsl(149,65%,74%),hsl(155,67%,68%));
  border: 1px solid hsl(155,67%,68%);
  border-bottom: 4px solid hsl(165,70%,55%);
  border-radius: 2px;
  color: #fff;
  font-weight: 600;
  margin-top: 0.5em;
  padding: 0.5em 1em 0.4em;
  text-shadow: 1px 1px 0 hsl(165,70%,55%);
  transition: 0.3s;
  
  &:hover {
    filter: brightness(90%) contrast(120%);
  }
  
  &:focus {
    box-shadow: 0 0 10px hsl(149,65%,74%);
    outline: none;
  }
  
  float: right;
}

.close {
  background: linear-gradient(hsl(10,95%,59%),hsl(360,95%,59%));
  border: 1px solid hsl(360,95%,59%);
  border-bottom: 4px solid hsl(360,95%,43%);
  text-shadow: 1px 1px 0 hsl(360,95%,43%);
  
  &:focus {
    box-shadow: 0 0 10px hsl(10,95%,59%);
  }
}
<div class="card">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt deserunt velit in blanditiis, cupiditate possimus sapiente tenetur porro accusantium animi?</p>
  
  <button class="open">Modal</button>
</div>

<div class="modals">
  <div class="modal-content">
    <div class="modal-wrap">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ab officiis libero reiciendis voluptas hic quas sit aspernatur exercitationem numquam obcaecati dolore sed voluptates, at aliquam cum harum, necessitatibus, expedita quod et magni? Possimus maiores vero suscipit ipsum veritatis, omnis pariatur magnam voluptatibus quisquam sequi veniam quas, et, dignissimos perspiciatis.</p>
      <button class="close">Close</button>
    </div>
  </div>
</div>

https://codepen.io/giana/pen/gPGGgE

但它只能绑定到一个元素。
如何使它在单击几个不同div的窗口时打开此模式窗口?
然而,如果不难的话——如何div在点击不同的模式窗口时打开相同的模式窗口,但里面有不同的内容?

javascript
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    Telion
    2020-06-09T14:34:07Z2020-06-09T14:34:07Z

    这是一个如何做的例子:https ://codepen.io/Telion/pen/jKyWwy

    为了选择具有类的所有元素,您需要使用querySelectorAll而不是querySelector. 之后要对其应用事件处理程序,您需要通过一个循环:

    Array.from(modalBtn).forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.preventDefault();
          modalContainer.style.display = 'block';  
          window.setTimeout(function(){
            modalContainer.classList.add('active');
          },0.1);
        });
    });
    

    对于一系列不同的模态窗口,你基本上需要做同样的事情,所以你必须遍历数组并将每个分配给所需的按钮。但是,我建议添加一个 type 属性modal-name="modal-menu"并使用它来了解哪个 div 打开了哪个模态窗口。会有问题创建一个新帖子,我很乐意提供帮助。


    示例:http: //jsfiddle.net/Telion/41j8yro3/

    $('.open').on("click", function(e) {
      e.preventDefault();
      let modal = $(this).attr("modal");
      $("#"+modal).css({display: 'flex'}).stop().animate({opacity: 1}, 300);
    });
    
    $('.close').on("click", function(e) {
      e.preventDefault();
      $(this).parents('.modal-content').stop().animate({opacity: 0}, 600, function() {$(this).css({display: 'none'})});
    })
    .card {
      position: relative;
    }
    
    .modal-content {
      background: hsl(250,30%,10%);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: none;
      opacity: 0;
      z-index: 1;
      transition: 0.5s 0s;
      align-items: center;
      justify-content: center;
    }
    
    .modal-wrap {
      flex: 1;
      width: 100%;
      max-width: 50em;  
    }
    
    /* Page Styling */
    
    $font-size: 18/16*1em;
    
    ::selection {
      background: hsl(40,100%,65%);
      color: #fff;
    }
    
    ::-moz-selection {
      background: hsl(40,100%,65%);
      color: #fff;
    }
    
    html, body {
      height: 100%;
    }
    
    body {
      background: hsl(30,10%,90%);
      color: hsl(200,50%,20%);
      font: #{$font-size}/1.65 'Open Sans', sans-serif;
      letter-spacing: 0.01em;
      text-rendering: optimizeLegibility;
      
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .card {
      background: #fff;
      flex: 1;
      max-width: 20em;
      padding: 3em;
      position: relative;
      width: 100%;
      
      &::before {
        content: '';
        border: 1px dotted hsl(165,80%,70%);
        position: absolute;
          top: 1.25em;
          right: 1.25em;
          bottom: 1.25em;
          left: 1.25em;
        pointer-events: none;
      }
      
      p {
        margin: 0.5em 0 1em;
        padding-bottom: 2em;
        border-bottom: 1px solid hsl(149,70%,90%);
        //text-align: center;
        //font-style: italic;
        //font-family: 'Playfair Display', serif;
      }
    }
    
    .open,
    .close {
      background: linear-gradient(hsl(149,65%,74%),hsl(155,67%,68%));
      border: 1px solid hsl(155,67%,68%);
      border-bottom: 4px solid hsl(165,70%,55%);
      border-radius: 2px;
      color: #fff;
      font-weight: 600;
      margin-top: 0.5em;
      padding: 0.5em 1em 0.4em;
      text-shadow: 1px 1px 0 hsl(165,70%,55%);
      transition: 0.3s;
      
      &:hover {
        filter: brightness(90%) contrast(120%);
      }
      
      &:focus {
        box-shadow: 0 0 10px hsl(149,65%,74%);
        outline: none;
      }
      
      float: right;
    }
    
    .close {
      background: linear-gradient(hsl(10,95%,59%),hsl(360,95%,59%));
      border: 1px solid hsl(360,95%,59%);
      border-bottom: 4px solid hsl(360,95%,43%);
      text-shadow: 1px 1px 0 hsl(360,95%,43%);
      
      &:focus {
        box-shadow: 0 0 10px hsl(10,95%,59%);
      }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="card">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt deserunt velit in blanditiis, cupiditate possimus sapiente tenetur porro accusantium animi?</p>
      
      <button class="open" modal="modal1">Modal</button>
      <button class="open" modal="modal2">Moda2</button>
    </div>
    
    
    <div id="modal2" class="modal-content">
      <div class="modal-wrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ab officiis libero reiciendis voluptas hic quas sit aspernatur exercitationem numquam obcaecati dolore sed voluptates, at aliquam cum harum, necessitatibus, expedita quod et magni? Possimus maiores vero suscipit ipsum veritatis, omnis pariatur magnam voluptatibus quisquam sequi veniam quas, et, dignissimos perspiciatis.</p>
        <button class="close">Close</button>
      </div>
    </div>
    <div id="modal1" class="modal-content">
      <div class="modal-wrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ab officiis libero reiciendis voluptas hic quas sit aspernatur exercitationem numquam obcaecati dolore sed voluptates, at aliquam cum harum, necessitatibus, expedita quod et magni? Possimus maiores vero suscipit ipsum veritatis, omnis pariatur magnam voluptatibus quisquam sequi veniam quas, et, dignissimos perspiciatis.</p>
        <button class="close">Close</button>
      </div>
    </div>

    • 1

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5