JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<div class="buttonbar" style="position: absolute; bottom: 40px; left: 40px;">
    <button id="popinTrigger">Toggle popin</button>
</div>

<div class="popinOverlay" data-popin-action="click:hide"></div>
<div class="popin popinSizeHalf" data-popin-state="visible">
    <h2 class="popinTitle">Jeg er en popin boks!</h2>
    <div class="popinContent">
        Hello
    </div>
    <div class="popinFooter">
        <div class="buttonbar">
            <button class="primarybutton icon-b" data-icon="s" data-popin-action="click:hide">Velg</button>
        </div>
        <div class="buttonbar">
            <button data-popin-action="click:hide">Avbryt</button>
        </div>
    </div>
</div>

CSS

body {
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
}

/**
 * Bootstrap stuff (ignore)
 */

@font-face {
    font-family: 'IcoMoon';
    src: url('https://dl.dropbox.com/s/rpckaeuzkdkllzo/icomoon-webfont.woff?dl=1') format('woff');
    font-weight: normal;
    font-style: normal;
}

.icon-b, .icon-a, .icon {
    position: relative;
}
.icon-b:before, .icon-a:after, .icon:after {
    text-indent: 0;
    text-transform: none;
    font-weight: normal;
    content: attr(data-icon);
    font-family: 'IcoMoon';
    line-height: inherit;
    position: absolute;
    display: block;
    top: 50%;
    margin: -45% 0 0 0;
}
.icon-b {
    padding-left: 28px;
}
.icon-b:before {
    left: 10px;
}
.icon-a {
    padding-right: 28px;
}
.icon-a:after {
    right: 10px;
}
.icon {
    text-indent: -999px;
    overflow: hidden;
}
.icon:after {
    left: 10px;
}

/** IcoMoon */
.icon-icomoon.icon-b:before, .icon-icomoon.icon-a:after, .icon-icomoon.icon:after {
    font-family: 'IcoMoon';
    margin: -40% 0 0 0;
}



/** Button bar */
.buttonbar {
    float: left;
    margin: 0 10px;
}

.buttonbar button {
    border-radius: 0;
    position: relative;
    margin-left: -1px;
}
.buttonbar button:first-child,
.buttonbar button.visiblebutton {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.buttonbar button:last-child,
.buttonbar button.visiblebutton {
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/** Buttons */
button {
    border: 1px solid #d1d1d1;
    border-radius: 3px;
    text-transform: uppercase;
    text-indent: 0;
    color: #888;
    font-size: 11px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    padding: 7px 15px;
    cursor: pointer;
    display: block;
    float: left;
    position: absolute;
    z-index: 1;
   ...

JavaScript

if(Udir === undefined) {
   var Udir = {};
}

var visiblePopins = [];

Udir.popin = function(popinEl, overlayEl, customOptions) {
    
    var options = {
        eventNS : ".popin",
        popinStateAttr : "data-popin-state",
        visiblePopinClass : "popinVisible",
        popinActionTriggerAttr : "data-popin-action",
        overlay : true,
        clickOverlayClose : true
    };
    
    var popin = null;
    var overlay = null;
    
    var methods = {
        init : function(p, o, opt) {
            $.extend(true, options, opt);

            popin = $(p);
            overlay = $(o);
            
            // Add events to popin
            popin.bind("show" + options.eventNS, methods.show);
            popin.bind("hide" + options.eventNS, methods.hide);
            popin.bind("toggle" + options.eventNS, methods.toggle);
            
            // Add events to action triggers
            popin.find("[" + options.popinActionTriggerAttr + "]").each(function(index, item) {
                methods._addActionTrigger($(item));
            });
            if(overlay != null && options.clickOverlayClose) {
                methods._addActionTrigger(overlay);
            }
            
            // Initial state
            var initState = methods._getPopinState();
            if(initState === "visible") {
                popin.trigger("show" + options.eventNS);
            }
            else {
                popin.trigger("hide" + options.eventNS);
            }
        },
        
        _getPopinState : function() {
            var state = popin.attr(options.popinStateAttr);
            if(state !== "visible" && state !== "hidden") {
                state = "hidden"; // default state
            }
            
            return state;
        },
        
        _setPopinState : function(state) {
            popin.attr(options.popinStateAttr, state);
        },
        
        _addActionTrigger : function(item) {
            var triggers =...