Jquery popup overlay not working

Question

I just saw the jQuery Popup Overlay demo on github, Here

downloaded the file query.popupoverlay.js

and added it to my project. and added this to my home page just to make sure it's working:

The button:

  <a class="initialism basic_open btn btn-success" href="#basic">Basic</a>

The container:

    <!-- Basic -->

<div id="basic" class="well" style="max-width:44em;">
    <h4>Basic example</h4>
    <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p>
    <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p>
    <button class="basic_close fade_open btn btn-default">Next example</button>
    <button class="basic_close btn btn-default">Close</button>
</div>

<script>
    $(document).ready(function () {
        $.fn.popup.defaults.pagecontainer = '.container';
        $('#my_popup').popup();

    });

    $(document).ready(function () {
        $('#basic').popup();
    });
</script>



    </div>

I use google chrome, by the way.

Answer 1

Before the plugin you should add jquery plugin in the script. The undesigned popup box is just due to the lack of css, that i havent added

 $(document).ready(function () { $('#basic').popup(); $('#basic1').popup(); $('#basic2').popup(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script> <a class="initialism basic_open btn btn-success" href="#basic">Basic</a> <div id="basic" class="well" style="max-width:44em;"> <h4>Basic example</h4> <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p> <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p> <button class="basic_close fade_open btn btn-default">Next example</button> <button class="basic_close btn btn-default">Close</button> </div> <a class="initialism basic1_open btn btn-success" href="#basic1">Basic1</a> <div id="basic1" class="well" style="max-width:44em;"> <h4>Basic 1 example</h4> <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p> <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p> <button class="basic1_close fade_open btn btn-default">Next example</button> <button class="basic1_close btn btn-default">Close</button> </div> <a class="initialism basic2_open btn btn-success" href="#basic2">Basic2</a> <div id="basic2" class="well" style="max-width:44em;"> <h4>Basic 2 example</h4> <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p> <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p> <button class="basic2_close fade_open btn btn-default">Next example</button> <button class="basic2_close btn btn-default">Close</button> </div>