How to load content from a separate file into a modal window using the bPopup plugin?

V

Vardensky2018-02-26 00:27:44

JavaScript

Vardensky, 2018-02-26 00:27:44

Good day, colleagues! Maybe someone had experience with the bPopup plugin ? I read the documentation and, it seems, did everything according to the examples, but the required result is not achieved. It is necessary that content from another page (test.html) is loaded into the popup window.

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>

The window opens when the button is pressed. But it is empty. What could be the problem?
upd
Uploaded on jsfiddle