При открытии модального оверлея еще видны некоторые элементы - PullRequest
Новая
       9

При открытии модального оверлея еще видны некоторые элементы

0 голосов
/ 15 февраля 2020

Я добавил на свой веб-сайт простую функцию наложения модалов из этого урока , используя JavaScript, который добавляет динамич c html. Но он не работает должным образом.

модальный не работает # 1

модальный не работает # 2

На картинке # 2 Я получаю оверлей, работающий по назначению, нажав position: relative, чтобы div с class = "budget", поэтому я попробовал то же самое с другим div, у которого есть эти стили: 

.add-container {
   width: 600px;
   height: 160px; 
   display: flex;
   justify-content: space-around;
   position: relative;
   margin: 0;
}

при нажатии на этот элемент position: relative ничего не сделал. Я понятия не имею, почему он работал на первом элементе (.budget), но не работал на втором элементе (.add-container).

Чтобы воспроизвести проблему, нажмите кнопку «ДОБАВИТЬ» и прокрутите вверх или вниз. Некоторые элементы явно не выцветают в фоновом режиме.

Я поместил минимальный код, необходимый для воспроизведения проблемы. Белотв HTML, CSS, JS. 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="/main.css">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <title>Some Money App</title>

</head>
<body>



   <div class="top">
      <div class="budget">
         <div class="budget-title">
            Available Budget in <span class="budget-title-month">%Month%</span>
         </div>

            <div class="budget-value-container">
               <svg class="dollar-svg" width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.94428 9.41789C7.94428 8.61573 7.71809 7.99011 7.26539 7.54192C6.81238 7.09397 6.11492 6.72118 5.17224 6.42205C4.66826 6.26345 4.29028 6.12623 4.03813 6.00905C3.7863 5.89236 3.61139 5.76908 3.51324 5.63809C3.41508 5.50746 3.36632 5.33957 3.36632 5.13442C3.36632 4.84508 3.47832 4.62098 3.70231 4.46249C3.92614 4.3039 4.23428 4.22436 4.62627 4.22436C5.36352 4.22436 6.04021 4.48583 6.65618 5.00833L7.67829 3.80439C7.03416 3.19747 6.25964 2.81954 5.35424 2.67035V0.598017H3.75846V2.65629C2.96506 2.77738 2.32565 3.07381 1.84039 3.5451C1.35513 4.01687 1.11226 4.60216 1.11226 5.30219C1.11226 6.00221 1.32933 6.57602 1.76315 7.0242C2.19729 7.47215 2.92746 7.85998 3.95445 8.18683C4.4114 8.32601 4.76138 8.45907 5.00425 8.58554C5.2468 8.71091 5.41479 8.85094 5.50854 9.0055C5.60151 9.1591 5.64838 9.35326 5.64838 9.58627C5.64838 9.941 5.51751 10.2214 5.2564 10.426C4.99497 10.6311 4.63555 10.7341 4.17829 10.7341C3.30089 10.7341 2.52636 10.4214 1.85423 9.79619L0.72012 11.0279C1.51352 11.8029 2.52636 12.2413 3.75846 12.3442V14.4726H5.35424V12.2605C6.16652 12.0923 6.80089 11.7588 7.25831 11.2589C7.71557 10.7598 7.94428 10.1464 7.94428 9.41789Z" fill="MidnightBlue"/>
               </svg>
               <div class="budget-value"></div>
            </div>


         <div class="budget-income">
            <div class="budget-income-text">Income</div>
            <svg class="up-svg" width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M13.0853 5.71556L12.456 5.05316L9.45444 8.21041C9.07063 8.61266 8.449 8.61266 8.06457 8.21041L5.02716 5.01418L1.72803 8.48375C1.34501 8.88747 0.72259 8.88747 0.339406 8.48375C-0.044714 8.08114 -0.044714 7.42633 0.339406 7.02347L4.33271 2.82332C4.71683 2.41973 5.33846 2.4201 5.72148 2.82332L8.75919 6.01809L11.0664 3.59214L10.3499 2.83933C10.092 2.56685 10.2098 2.10216 10.5632 2.0027L14.2992 0.950278C14.6529 0.850211 14.9759 1.19026 14.8805 1.56197L13.8798 5.49255C13.7856 5.86365 13.3436 5.98754 13.0853 5.71556Z" fill="green"/>
            </svg>
            <div class="budget-income-value"></div>
         </div>

         <div class="budget-expenses">
            <div class="budget-expenses-text">Expenses</div>
            <svg class="down-svg" width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M0.338524 1.2637C-0.044498 1.67144 -0.044498 2.33188 0.338524 2.73925L4.33323 6.98253C4.71625 7.3904 5.33788 7.3904 5.7209 6.98253L8.76002 3.75489L11.0669 6.20602L10.35 6.96616C10.0919 7.24084 10.2106 7.71054 10.5639 7.80951L14.3003 8.87427C14.6539 8.97532 14.9761 8.63172 14.8808 8.25636L13.88 4.28545C13.7858 3.91106 13.3447 3.78593 13.0855 4.06037L12.4568 4.72862L9.45417 1.54119C9.07115 1.13308 8.44859 1.13308 8.06524 1.54119L5.02643 4.76907L1.72744 1.2637C1.53587 1.0605 1.2845 0.958594 1.03408 0.958594C0.78163 0.958594 0.531214 1.0605 0.338524 1.2637Z" fill="crimson"/>
               </svg>
            <div class="budget-expenses-value"></div>
         </div>
      </div>
   </div> 

   <div class="bottom">
      <div class="add">

         <div class="add-container">

            <div class="select-box">
               <div class="options-container options-container-type">
                  <div class="option option-type">
                     <input type="radio" class="radio">
                     <label>Income</label>
                  </div>
                  <div class="option option-type">
                     <input type="radio" class="radio">
                     <label>Expense</label>
                  </div>
               </div>

               <div class="selected selected-type">Income or expense</div>
            </div>


            <div class="select-box">
               <div class="options-container options-container-category">
                  <div class="option option-category">
                     <input type="radio" class="radio">
                     <label>Food</label>
                  </div>
                  <div class="option option-category">
                     <input type="radio" class="radio">
                     <label>Transportation</label>
                  </div>
                  <div class="option option-category">
                     <input type="radio" class="radio">
                     <label>Other</label>
                  </div>
               </div>

               <div class="selected selected-category">Select Category</div>
            </div>

            <div class="input-wrapper">
               <input type="text" class="add-description" placeholder=" ">
               <label class="label-name">
                  <span class="label-text">Description</span>
               </label>
            </div>
            <div class="input-wrapper">
               <input type="text" class="add-value" placeholder=" ">
               <label class="label-name">
                  <span class="label-text">Value</span>
               </label>
            </div>
            <button class="add-btn">Add</button>
         </div>
      </div>


   <script src="app.js">   
   </script>
</body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: "Verdana", sans-serif;
  position: relative; 
  height: 150vh;

}

.top {
  height: 70vh;
  background-image: url(/background1.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px; }

.budget {
  position: relative;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.4);
  padding: 15px; }
  .budget .budget-title {
    font-size: 34px;
    text-align: center;
    margin-bottom: 15px; }
  .budget .budget-value-container {
    text-align: center; }
    .budget .budget-value-container .budget-value {
      font-size: 40px;
      margin-bottom: 25px;
      letter-spacing: 4px;
      display: inline-block; }
    .budget .budget-value-container .dollar-svg {
      width: 45px;
      height: 45px; }
  .budget .budget-income {
    margin-bottom: 20px; }
    .budget .budget-income .up-svg {
      width: 30px;
      height: 30px; }
  .budget .budget-expenses .down-svg {
    width: 30px;
    height: 30px; }
  .budget .budget-income, .budget .budget-expenses {
    font-size: 22px;
    text-align: center;
    padding: 5px; }
  .budget .budget-income-text, .budget .budget-expenses-text {
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px; }
  .budget .budget-income-value, .budget .budget-expenses-value {
    font-size: 20px;
    display: inline-block; }

.add {
  border-bottom: 2px solid #e7e7e7;
  border-top: 2px solid #e7e7e7;
  background-color: #f7f7f7;
  display: flex;
  justify-content: center; }
  .add .vanilla-calendar {
    margin: 0;
    margin-bottom: 10px; }

.add-container {
  width: 600px;
  height: 160px;
  display: flex;
  justify-content: space-around;
  position: relative;
  margin: 0; }

.container {
  width: 1000px;
  margin: 50px auto;
  display: flex;
  justify-content: space-around; }
  .container h2 {
    text-align: center;
    margin-bottom: 20px; }
  .container > div {
    flex: 1; }


.add-container button {
  position: absolute;
  right: 10px;
  bottom: 15px;
  top: 90px;
  width: 100px;
  font-size: 22px;
  border: none;
  border-radius: 12px;
  background: #2f3640;
  padding: 12px 18px;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer; }
  .add-container button:hover {
    background: #5e6974; }


.input-wrapper {
  position: relative;
  height: 50px;
  overflow: hidden; }
  .input-wrapper input {
    width: 100%;
    height: 100%;
    color: #595f6e;
    padding-top: 25px;
    border: none;
    outline: none; }
  .input-wrapper label {
    position: absolute;
    bottom: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-bottom: 1px solid black; }
    .input-wrapper label::after {
      content: "";
      position: absolute;
      left: 0px;
      bottom: -1px;
      height: 100%;
      width: 100%;
      border-bottom: 3px solid #2f3640;
      transform: translateX(-100%);
      transition: transform 0.3s ease; }
    .input-wrapper label .label-text {
      position: absolute;
      bottom: 5px;
      left: 0px;
      transition: all 0.3s ease; }
  .input-wrapper .add-description, .input-wrapper .add-value {
    font-size: 14px;
    padding: 12px 15px; }

.input-wrapper input:focus + .label-name .label-text, .input-wrapper input:not(:placeholder-shown) + .label-name .label-text {
  transform: translateY(-150%);
  font-size: 14px;
  color: #5fa8d3;
  color: #2f3640; }

.input-wrapper input:focus + .label-name::after, .input-wrapper input:not(:placeholder-shown) + .label-name::after {
  transform: translateX(0%); }

.select-box {
  display: flex;
  width: 200px;
  flex-direction: column; }
  .select-box .options-container {
    background: #2f3640;
    color: #f5f6fa;
    max-height: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.4s;
    border-radius: 8px;
    overflow: hidden;
    order: 1; }
    .select-box .options-container.active {
      max-height: 240px;
      opacity: 1;
      overflow-y: scroll; }
      .select-box .options-container.active + .selected::after {
        transform: rotateX(180deg);
        top: -6px; }
    .select-box .options-container::-webkit-scrollbar {
      width: 8px;
      background: #0d141f;
      border-radius: 0 8px 8px 0; }
    .select-box .options-container::-webkit-scrollbar-thumb {
      background: #525861;
      border-radius: 0 8px 8px 0; }
    .select-box .options-container .option {
      padding: 12px 24px;
      cursor: pointer; }
      .select-box .options-container .option:hover {
        background: #414b57; }
      .select-box .options-container .option label {
        cursor: pointer; }
      .select-box .options-container .option .radio {
        display: none; }
  .select-box .selected {
    background: #2f3640;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #f5f6fa;
    position: relative;
    order: 0;
    padding: 12px 24px;
    cursor: pointer; }
    .select-box .selected::after {
      content: "";
      background: url("/arrow-down.svg");
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      height: 100%;
      width: 32px;
      right: 10px;
      top: 5px;
      transition: all 0.4s; }

header {
  padding: 20px 10px;
  background: #2f3640; }

nav ul {
  list-style: none; }
  nav ul li {
    display: inline-block;
    padding: 0 15px;
    text-transform: uppercase; }
    nav ul li img {
      width: 18px;
      margin-right: 6px; }
    nav ul li a {
      text-decoration: none;
      color: #d8d4d2;
      font-size: 18px; }
      nav ul li a:hover {
        color: #a7a3a1; }

.modal-overlay {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center; }
  .modal-overlay .modal-window {
    max-width: 500px;
    background: #fff;
    border: 1px solid #fff;
    font-size: 22px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25); }
    .modal-overlay .modal-window .modal-titlebar {
      height: 40px;
      background: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .modal-overlay .modal-window .modal-titlebar .modal-title {
        margin-left: 15px;
        font-weight: bold;
        color: #eee; }
      .modal-overlay .modal-window .modal-titlebar .modal-close {
        width: 40px;
        height: 40px;
        outline: none;
        border: none;
        background: transparent;
        color: #eee;
        cursor: pointer; }
        .modal-overlay .modal-window .modal-titlebar .modal-close:active {
          transform: scale(0.85); }
    .modal-overlay .modal-window .modal-content {
      padding: 15px;
      font-size: 0.9em; }

/*# sourceMappingURL=main.css.map */

let UIController = (function () {
   // for custom select box - income, expenses
   const typeSelected = document.querySelector(".selected.selected-type");
   const typeOptionsContainer = document.querySelector(".options-container.options-container-type");
   const typeOptionsList = document.querySelectorAll(".option.option-type");


   typeSelected.addEventListener("click", () => {
      typeOptionsContainer.classList.toggle("active");
   })
   typeOptionsList.forEach(o => {
      o.addEventListener("click", () => {
         typeSelected.innerHTML = o.querySelector("label").innerHTML;
         typeOptionsContainer.classList.remove("active");
      })
   })

   // For custom select box - Food or Transportation or Other
   const categorySelected = document.querySelector(".selected.selected-category");
   const categoryOptionsContainer = document.querySelector(".options-container.options-container-category");
   const categoryOptionsList = document.querySelectorAll(".option.option-category");

   categorySelected.addEventListener("click", () => {
      categoryOptionsContainer.classList.toggle("active");
   })
   categoryOptionsList.forEach(o => {
      o.addEventListener("click", () => {
         categorySelected.innerHTML = o.querySelector("label").innerHTML;
         categoryOptionsContainer.classList.remove("active");
      })
   })


   return {
      ModalWindow: {
         init() {
            document.body.addEventListener("click", e => {
               console.log(e.target);
               if (e.target.classList.contains("modal-close")) {
                  this.closeModal(e.target)
               }
            })
         },

         getHtmlTemplate(modalOptions) {
            return `
               <div class="modal-overlay">
                  <div class="modal-window">
                     <div class="modal-titlebar">
                        <span class="modal-title">${modalOptions.title}</span>
                        <button class="modal-close material-icons">close</button>
                     </div>
                     <div class="modal-content">
                        ${modalOptions.content}
                     </div>
                  </div>
               </div>
            `;
         },
         openModal(modalOptions = {}) {
            modalOptions = Object.assign({
               title: "Modal Title",
               content: "Modal Content"
            }, modalOptions);

            const modalTemplate = this.getHtmlTemplate(modalOptions);
            document.body.insertAdjacentHTML("afterbegin", modalTemplate);
         },
         closeModal(closeButton) {
            const modalOverlay = closeButton.parentElement.parentElement.parentElement;
            modalOverlay.parentElement.removeChild(modalOverlay);
         }
      } 
   };
})();



// Global App Controller
let controller = (function (UI) {

   // calendar date selected validation for if statement
   let datePicked = false;

   let addItem = function () {

      // Warning about not picking a date
      if (datePicked == false) {
         UI.ModalWindow.openModal({
            title: "Error",
            content: "Please select a date from calendar!"
         });
      }
   }


   document.querySelector(".add-btn").addEventListener("click", addItem);

   document.addEventListener("DOMContentLoaded", () => UI.ModalWindow.init());
})(UIController)
...