JSFiddle - React, Tailwind, and code Playground

by BentFX

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Testing...</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <a href='javascript:threePopups();'>threePopups();</a> <a href='javascript:manipulate();'>manipulate();</a> - uses <a href="https://code.google.com/p/pixelperfectplugin/source/browse/trunk/src/content/browserscripts/dom-drag.js?spec=svn69&r=66" target="_blank">dom-drag.js</a><br><br>
        Try popping up whole bunch. Only the last three can be manipulated, but the close boxes remember their 'this'.
    </body>
</html>

CSS

body{
    background-color: LightGray;
    border-color: BurlyWood;
    font-family: sans;
}

.popup{
    position: absolute;
    width: 180px;
    height: 300px;
    border: 4px solid;
    border-color: inherit;
    background-color: Snow;
    border-radius: 14px;
}

.dragbar{
    position: relative;
    cursor: move;
    color: black;
    background-color: cornsilk;
    padding: 3px 3px 3px 8px;
    margin: -16px 8px 2px 8px;
    border: 4px solid;
    border-color: inherit;
    border-radius: 8px;
}

.closebox{
    cursor: pointer;
    color: black;
    background-color: BurlyWood;
    float: right;
    display: inline-block;
    width: 20px;
    text-align: center;
    border-radius: 4px;
}

.content{
    padding: 6px;
}

JavaScript

var x;
var y;
var z;

function popup(title) {
    var t = this;
    $("body").prepend('<div class="popup"></div>');
    t.container = document.body.firstChild;
    $(t.container).html('<div class="dragbar"><span>' + title + '</span></div>');
    t.dragbar = t.container.firstChild;
    t.title = t.dragbar.firstChild;
    $(t.dragbar).append('<div class="closebox">✖</div>');
    t.closebox = t.dragbar.lastChild;
    t.closebox.onclick = function() {
        t.cleanUp();
    };
    $(t.container).append('<div class="content"></div>');
    t.content = t.container.lastChild;
    Drag.init(t.dragbar, t.container);
    return t;
}

popup.prototype.cleanUp = function() {
    // close connections
    // delete all you can 
    document.body.removeChild(this.container);
};


function threePopups() {
    x = new popup("One...");
    y = new popup("Two...");
    z = new popup("Three...");
}

function manipulate() {
    // write to x's content div
    $(x.content).html("X's content, so there's that!");
    // change y's title
    $(y.title).html("Y's title!");
    // massage z's dragbar
    z.dragbar.style.margin = "2px";
    $(z.dragbar).html("Close Z with code!");
    $(z.content).html('<a href="javascript:z.cleanUp();">close</a>');
}

/**************************************************
 * dom-drag.js
 * 09.25.2001
 * www.youngpup.net
 * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
 **************************************************
 * 10.28.2001 - fixed minor bug where events
 * sometimes fired off the handle, not the root.
 **************************************************/

var Drag = {

    obj: null,

    init: function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {
        o.onmousedown = Drag.start;

        o.hmode = bSwapHorzRef ? false : true;
        o.vmode = bSwapVertRef ? false : true;

        o.root = oRoot && oRoot != null ? oRoot : o;

        if (o.hmode &&...