JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
Content of popup
<button data-url="http://jsfiddle.net/" class="get-content" style="float:left;">1</button>
<button class="get-content" data-url="http://jsfiddle.net/" style="float:left;">2</button>
<button class="get-content" data-url="http://jsfiddle.net/" style="float:left;">3</button>
<div id="target"></div>
</div>
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;
}
JavaScript
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
$(".get-content").click(
function() {$("#target").load($(this).data("url")) }
);
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
/*================================================================================
* @name: bPopup - if you can't get it up, use bPopup
* @author: (c)Bjoern Klinggaard (twitter@bklinggaard)
* @demo: http://dinbror.dk/bpopup
* @version: 0.9.4.min
================================================================================*/
(function(b){b.fn.bPopup=function(z,F){function K(){a.contentContainer=b(a.contentContainer||c);switch(a.content){case "iframe":var h=b('<iframe class="b-iframe" '+a.iframeAttr+"></iframe>");h.appendTo(a.contentContainer);r=c.outerHeight(!0);s=c.outerWidth(!0);A();h.attr("src",a.loadUrl);k(a.loadCallback);break;case "image":A();b("<img />").load(function(){k(a.loadCallback);G(b(this))}).attr("src",a.loadUrl).hide().appendTo(a.contentContainer);break;default:A(),b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl,a.loadData,function(){k(a.loadCallback);G(b(this))}).hide().appendTo(a.contentContainer)}}function A(){a.modal&&b('<div class="b-modal...