Блог

Мне нужно обновить родительскую страницу при закрытии лайтбокса наложения (не всплывающего окна).

В лайтбоксе нет кнопки «Закрыть», он закрывается нажатием в любом месте за пределами лайтбокса.

Я попробовал следующий код, но он не обновляет родительскую страницу.

Не могли бы вы сообщить мне, как обновить родительскую страницу?

HTML:

 <div class="dwqa-ask-question">
<a href="https://www.myweb.com/ask-questions/" rel="lightbox" data-lightbox-type="iframe">Ask Question
</a>
</div>
 

Лайтбокс:

 <div class="nivo-lightbox-overlay nivo-lightbox-theme-default nivo-lightbox-effect-fade nivo-lightbox-open">
    <div class="nivo-lightbox-wrap">
        <div class="nivo-lightbox-content">
        <iframe src="https://www.mycom.com/ask-questions/" class="nivo-lightbox-item" frameborder="0" vspace="0" hspace="0" scrolling="auto"></iframe>
        </div>
        <div class="nivo-lightbox-title-wrap"></div>
    </div>
    <a href="#" class="nivo-lightbox-nav nivo-lightbox-prev" style="display: none;">Previous</a>
    <a href="#" class="nivo-lightbox-nav nivo-lightbox-next" style="display: none;">Next</a>
    <a href="#" class="nivo-lightbox-close" title="Close">Close</a>
</div>
 

Добавлен следующий код на странице лайтбокса (=страница с вопросами):

 $(document).ready(function () {
    if (window.opener) { 
        window.close();
    }
    if (window != top) {
        top.location.replace(document.location);
    }
});
 

 jQuery(document).ready(function refreshParentWindow(){
           window.opener.location.href="/{!$CurrentPage.parameters.id}";
           window.top.close();
       });
 

 jQuery(document).ready(function (){
var rel = window.opener.location; 
window.close(); 
rel.reload(); 
});
 

Спасибо.

«Отзывчивый лайтбокс» — это плагин, который я использую для лайтбокса.

Существует несколько способов настроить это. Лично я всегда использую дополнительные классы css для отображения и/или скрытия моих html-элементов на странице, но поскольку в настоящее время вы используете плагин, вы можете добавить прослушиватель событий на свою страницу.

Поэтому используйте этот javascript на своей странице:

 jQuery(document).ready($ => {

  console.log("You just loaded your js file onto the page"); // Testing whether you've loaded your js file correctly!

  $(document).on("click", e => {
    if (
      document.querySelector('.nivo-lightbox-overlay').contains(e.target)
      amp;amp;
      !document.querySelector(".nivo-lightbox-wrap").contains(e.target)
     ) {
      console.log("You just clicked outside of the lightbox wrap"); // Testing event listener

      location.reload(); // a simple refresh
      // OR 
      // location.reload(true); // a hard refresh
    };
  });
});
 

Вы видите orange область вокруг вашей обертки из лайтбокса с nivo-lightbox-overlay классом? Нажмите на него в любом месте, и он перезагрузит вашу страницу!

Дайте мне знать, если вам удалось заставить его работать!

Другое решение

 jQuery(document).ready( $ => {
    $(document).on("click", "div.nivo-lightbox-overlay", () => {

        if ($("div.nivo-lightbox-overlay").length) {

          location.reload(); // a simple refresh
          // OR 
          // location.reload(true); // a hard refresh

        }

    })
});