JSFiddle - React, Tailwind, and code Playground

by Henrik C Wiberg

HTML

<button class="RetFotoDataKnap" data-value="123">POP 1</button><br />
<button class="RetFotoDataKnap" data-value="456">POP 2</button><br />
<button class="RetFotoDataKnap" data-value="789">POP 3</button>

<div id="RetFotoForm" >
   <a class="b-close">LUK</a>
    <div>Show data-value HERE ? <br />
        <script>
   $( "#RetFotoForm" ).RetFotoDataKnap("data-value");
        </script>
    </div>
     
</div>

CSS

#RetFotoForm {
    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

;(function($) {
        $(function() {
  $('.RetFotoDataKnap').on('click', function(e) {
    e.preventDefault();
    var data = $(this).attr("data-value"); //Get your attribute
    $('#RetFotoForm').bPopup({
        contentContainer:'.content',
        loadUrl: 'MyPhpSite.php?data-value='+data //Pass via get
    });
});
  
   });
    })(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.10.0.min
 ================================================================================*/
 (function(b){b.fn.bPopup=function(z,F){function M(){a.contentContainer=b(a.contentContainer||c);switch(a.content){case "iframe":var d=b('<iframe class="b-iframe" '+a.iframeAttr+"></iframe>");d.appendTo(a.contentContainer);r=c.outerHeight(!0);s=c.outerWidth(!0);A();d.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(c,d,e){k(a.loadCallback,d);G(b(this))}).hide().appendTo(a.contentContainer)}}function A(){a.modal&&b('<div class="b-modal '+e+'"></div>').css({backgroundColor:a.modalColor,position:"fixed",top:0,right:0,bottom:0,left:0,opacity:0,zIndex:a.zIndex+t}).appendTo(a.appendTo).fadeTo(a.speed,a.opacity);D();c.data("bPopup",a).data("id",e).css({left:"slideIn"==a.transition||"slideBack"==a.transition?"slideBack"==a.transition?f.scrollLeft()+u:-1*(v+s):l(!(!a.follow[0]&&m||g)),position:a.positionStyle||"absolute",top:"slideDown"==a.transition||"slideUp"==a.transition?"slideUp"==a.transition?f.scrollTop()+w:x+-1*r:n(!(!a.follow[1]&&p||g)),"z-index":a.zIndex+t+1}).each(function(){a.appending&&b(this).appendTo(a.appendTo)});H(!0)}function...