Fancybox 2: overlay исчезает, когда popup вызывается методом click() (JQuery)

Я хочу задать вопрос, который у меня возникает об открытии всплывающего окна fancybox, вызывающего его из JQuery, который я хочу показать автоматически, так что это что я делаю в Jquery:Fancybox 2: overlay исчезает, когда popup вызывается методом click() (JQuery)

document.getElementById('link-fancybox-popup').click();

Я просто имитируя щелчок по ссылке (<a>), который открывает его. Он работает, но наложение fancybox (черный фон за всплывающим окном) исчезает, и всплывающее окно отображается без этого наложения.

Это очень странно, потому что, если я удалю это предложение, которое я написал, когда я нажимаю вручную всплывающее окно, оно отлично работает и отображается оверлей.

У любого человека было такое поведение? Спасибо.

источник

2015-01-15 danigonlinea

Вам необходимо обернуть свой код внутри метода '.ready()'. Вот ваша проблема: http://jsfiddle.net/6n32gv8x/ и здесь исправлено http://jsfiddle.net/6n32gv8x/1/ – JFK

Я сделал это в JS-файле, добавленном в HTML, и у него уже есть .ready() внутри, но моя проблема заключалась в том, что в HTML я загрузил этот файл перед библиотеками fancybox. Поэтому я изменил порядок этих файлов, и он отлично работает как jsfiddle, который вы мне прислали. Спасибо @JFK! – danigonlinea

Обычно я не использую плагин для всплывающего окна, вы можете использовать следующий скрипт для использования оверлея.

$(function(){ 
 
    $('.clickme').click(function(){ 
 
     $('.popup,.mask').fadeIn(); 
 
    }); 
 
    $('.mask').click(function(){ 
 
     $('.popup,.mask').fadeOut(); 
 
    }); 
 
});

.clickme{ 
 
    display:inline-block; 
 
    cursor:pointer; 
 
    padding:10px; 
 
    background:#00cfff; 
 
    color:#fff; 
 
} 
 
.mask{ 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    background:rgba(0,0,0,0.4); 
 
    z-index:2; 
 
    display:none; 
 
} 
 
.popup{ 
 
    display:none; 
 
    position:fixed; 
 
    top:20px; 
 
    left:20px; 
 
    width:100px; 
 
    height:100px; 
 
    background:#d30043; 
 
    z-index:3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class='outer'> 
 
    <span class='clickme'>Click Me</span> 
 
    <div class='mask'></div> 
 
    <div class='popup'>I am a Popup</div> 
 
</div>

источник

2015-01-15 11:52:05

Это действительно хорошо, Мухаммед. Я просто помогаю с плагином, потому что я думал, что с ним будет легче справиться, но с очень небольшим количеством кода вы сможете сделать отличное всплывающее окно. Спасибо за долю, и я приму свой ответ, если, наконец, не найду никаких дополнительных решений;) – danigonlinea

Попробуйте

HTML

<p>To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p> 
     <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
     <div id="fade" class="black_overlay"></div>

CSS

.black_overlay{ 
      display: none; 
      position: absolute; 
      top: 0%; 
      left: 0%; 
      width: 100%; 
      height: 100%; 
      background-color: black; 
      z-index:1001; 
      -moz-opacity: 0.8; 
      opacity:.80; 
      filter: alpha(opacity=80); 
     } 
     .white_content { 
      display: none; 
      position: absolute; 
      top: 25%; 
      left: 25%; 
      width: 50%; 
      height: 50%; 
      padding: 16px; 
      border: 16px solid orange; 
      background-color: white; 
      z-index:1002; 
      overflow: auto; 
     }

DEMO HERE

источник

2015-01-15 13:00:16 anujsoft

Fancybox 2: overlay исчезает, когда popup вызывается методом click() (JQuery)

ответ

Смежные вопросы