Найти ближайший # loading и показать его? - PullRequest
Новая
       9

Найти ближайший # loading и показать его?

0 голосов
/ 17 января 2019

У меня есть код из другого вопроса, который показывает загрузку в течение нескольких секунд, используя: 

  const Loading = () => {
    let tOut = null;
    const el = document.querySelector(".loading");
    const show = () => {
      el.classList.add('show');
      tOut = setTimeout(hide, 5000);
    };  
    const hide = () => {
      el.classList.remove('show');
      clearTimeout(tOut);
    };
    return {
      show,
      hide
    };
  };


  const loadingDots = Loading();
  const loadBtns = document.querySelectorAll('.item');

  [...loadBtns].forEach(el => el.addEventListener('click', loadingDots.show));

Единственное, что мне нужно, это отобразить, когда я открываю 3 отдельных модала, но только модал, ближайший к верхней части страницы, показывает экран загрузки, у меня такое ощущение, что он не отображает ближайший # загрузка экрана и вместо отображения первого найденного html для #loading: 

 <div id="loading"><i></i><i></i><i></i></div>

он внедряется в страницу с использованием php, поэтому этот же код отображается в 3 местах (не уверен, может ли это иметь какое-либо отношение к нему).

how modal 1 looks on click how modal 2 looks on click

HTML-код: 

<div class="services_bg_images">
  <div class="services_container" ID='services-target'>
    <div class="services_title_main">
      <h6 data-aos="fade-down">Our Capabilities</h6>
    </div>
    <div data-aos="fade-down" class="underline4"></div>
    <div class="services_text">
      <p data-aos="fade-down" class="p3">Click modules to book & view prices where available.</p>
    </div>
    <div class="services_wrap">

      <div class="items">
        <div class="item" id="capa_1" data-modal="#modalFive">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="400" class="p4">

              </p>
          </div>
        </div>

        <div id="modalFive" class="modal_briefs">
          <div class="inline-wrap"><span class="closex_brief"></span>

            <div class="brief_container_modal">
             <div class="loading"><i></i><i></i><i></i></div>
              <div class="capabilities_title_main">
                <h6 data-aos="fade-down">Get a Quote</h6>
              </div>
              <div data-aos="fade-down" class="underline4"></div>
              <div class="capabilities_text">
                <p data-aos="fade-down" class="p3">Fill in the brief below to get a quote.</p>
              </div>
              <div class="brief_wrap_modal">
                <iframe id="brief_1" data-src="/wordpress/gfembed/?f=5" height="100%" width="100%" frameBorder="0" scolling="no" class="gfiframe"></iframe>
              </div>
            </div>
          </div>
        </div>


        <div class="item" id="capa_2" onclick="location.href='pricing';">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="800" class="p4">

              </p>
          </div>
        </div>

        <div class="item" id="capa_3" data-modal="#modalSeven">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="1200" class="p4">

             </p>
          </div>
        </div>

        <div id="modalSeven" class="modal_briefs">
          <div class="inline-wrap"><span class="closex_brief"></span>

            <div class="brief_container_modal">
             <div class="loading"><i></i><i></i><i></i></div>
              <div class="capabilities_title_main">
                <h6 data-aos="fade-down">Get a Quote</h6>
              </div>
              <div data-aos="fade-down" class="underline4"></div>
              <div class="capabilities_text">
                <p data-aos="fade-down" class="p3">Fill in the brief below to get a quote.</p>
              </div>
              <div class="brief_wrap_modal">
                <iframe id="brief_3" data-src="/wordpress/gfembed/?f=3" height="100%" width="100%" frameBorder="0" scolling="no" class="gfiframe"></iframe>
              </div>
            </div>
          </div>
        </div>


        <div class="item" id="capa_4" data-modal="#modalEight">
          <div class="services_title">
            <h1 data-aos="fade-right" data-aos-offset="40">Example</h1>
          </div>
          <div data-aos="fade-left" class="underline3"></div>
          <div class="Services-paragraph">
            <p data-aos="fade-up" data-aos-duration="1600" class="p4">

              </p>
          </div>
        </div>

        <div id="modalEight" class="modal_briefs">
          <div class="inline-wrap"><span class="closex_brief"></span>
            <div class="brief_container_modal">
             <div class="loading"><i></i><i></i><i></i></div>
              <div class="capabilities_title_main">
                <h6 data-aos="fade-down">Get a Quote</h6>
              </div>
              <div data-aos="fade-down" class="underline4"></div>
              <div class="capabilities_text">
                <p data-aos="fade-down" class="p3">Fill in the brief below to get a quote.</p>
              </div>
              <div class="brief_wrap_modal">
                <iframe id="brief_4" data-src="/wordpress/gfembed/?f=4" height="100%" width="100%" frameBorder="0" scolling="no" class="gfiframe"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS: 

.loading {
  position: fixed;
  z-index: 1000;
  top:0;
  left: 0;
  width:100%;
  height:100%;
  display:flex;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 3em;
  align-items: center;
  justify-content:center;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
}
.loading.show {
  opacity: 1;
  visibility: visible;
}
@keyframes blink {
  50% {opacity: 1;}
}
.loading i:after {content: "\25cf";}
.loading i { opacity: 0; animation: blink 1.2s infinite; }
.loading i:nth-child(2) { animation-delay: .2s; }
.loading i:nth-child(3) { animation-delay: .4s; }

.brief_container_modal {
    position: absolute;
}
.brief_container,.brief_container_modal{
    z-index:99;
    top:150px;
    width:1200px;
    max-width:90%;
    margin-bottom:50px;
    left:0;
}
.brief_container,.brief_container_modal,
.brief_wrap_modal,.closex_brief {
    margin-right:auto;
    margin-left:auto;
    right:0
}
.brief_container_modal{
    background:linear-gradient(to bottom right,#f5f5f5 50%,#fff 50%);
    border:3px solid #ec321f;
    border-radius:10px;
}
.closex_brief{
    position:absolute;
    background:url(IMAGES/close_icon.png);
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:block;
    left:0;
    top:125px;
    z-index:1000
}
.brief_wrap_modal {
    position: relative;
    width: 1150px;
    max-width: 95%;
    height: inherit;
}

Если кто-то может помочь, буду признателен!

1 Ответ

0 голосов
/ 17 января 2019

идентификаторы должны быть уникальными. Поэтому document.querySelectorAll('#capa_1') выбирает только первый модал с этим идентификатором. Используйте класс, чтобы соответствовать всем модальным DIV.

На самом деле у вас есть только один DIV с id="capa_1". Все модалы имеют class="item", поэтому вы должны использовать это, чтобы получить их все.

JS должно быть: 

const loadBtns = document.querySelectorAll('.item');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...