@Vardensky

Как сделать загрузку контента из отдельного файла в модальное окно при помощи плагина bPopup?

Доброго времени суток, коллеги! Может у кого был опыт работы с плагином bPopup? Документацию читал и ,вроде как, делал всё по примерам, но требуемый результат не достигается. Нужно чтобы в popup окно загружался контент с другой страницы (test.html).

index.html
<head>
<link href="css/modal-windows.css" rel="stylesheet" type="text/css">

...
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
    <a class="b-close">x<a/>
</div>

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bpopup-0.11.0.min.js"></script>

...
<script>
   ;(function($) {
        $(function() {
            $('#my-button').bind('click', function(e) {
                e.preventDefault();
                $('#element_to_pop_up').bPopup({
                  contentContainer:'.content',
                  loadUrl: 'test.html' //Uses jQuery.load()
            
                });
            });
         });
     })(jQuery);
 </script>

</body>
CSS
#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.b-close{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}

test.html

Собственно, эта страница состоит только из этого кода. Может проблема в этом и есть?
<div class="content">
<h2>Ajax popup</h2>
<p>
    Content loaded with Ajax in bPopup
</p>

</div>



Окно при нажатии на кнопку открывается. Но оно пустое. В чем может быть проблема?
upd
До загрузил на jsfiddle
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
djamalutdin
@djamalutdin
Для "спасибо" есть кнопка "ОТМЕТИТЬ РЕШЕНИЕМ"
https://fiddle.jshell.net/rumwu1t9/9/

там ожидание загрузки, подождать нужно а так работает

а у тебя в попапе не хватал селектор с классом "content"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы