JSFiddle - React, Tailwind, and code Playground

by Aniket Pant

HTML

<script src="http://www.thinkinginnovative.com/popupexample/bpopup/jquery.bpopup.min.js"></script>
<div id="element_to_pop_up">
    <div class="b-close">x</div>
    <div id="container"></div>
</div>
<div id="my-button1">Click me!</div>

CSS

#element_to_pop_up {
    background-color:#fff;
    border-radius:10px;
    color:#000;
    display:none;
    padding:10px;
    min-width:100px;
    min-height: 100px;
}

JavaScript

// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;
(function ($) {
    // DOM Ready
    $(function () {
        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#my-button1').bind('click', function (e) {
            e.preventDefault();
            $('#element_to_pop_up').bPopup({
                speed: 450,
                transition: 'slideDown',
                loadUrl: 'http://www.fotoshows.com.ar/www/zidanerestobar.com.ar/images/test_flyer.jpg',
                content: 'image',
                contentContainer: '#container',
            });
        });
    });
})(jQuery);