JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<div class="placeholder1">some other content</div>
<div class="container">
    <div>
        <button onclick="LITHIUM.Wants.open(event, this, 200, 200)">Want</button>
    </div>
</div>
<div class="placeholder2">some other content</div>

CSS

.li-wants-modal {    
    background: red;    
}

.container {
    margin: 0px 0px 0px 300px;
}

.placeholder1 { 
    height: 100px;     
    background-color: #f5f5f5;
}


.placeholder2 { 
    height: 1000px; 
    width: 1000px; 
    background-color: #f5f5f5;
}

JavaScript

LITHIUM = {};
LITHIUM.Wants = {};

LITHIUM.Wants.open = function (event, buttonElement, modalWidth, modalHeight) {        
    var modalElement, buttonElementRect, closeElement;        
    
    buttonElementRect = buttonElement.getBoundingClientRect();
        
    modalElement = document.createElement('div');    
    modalElement.className = 'li-wants-modal';    
    modalElement.style.position = 'absolute';
    modalElement.style.zIndex = 1000;
    modalElement.style.width = modalWidth + 'px';
    modalElement.style.height = modalHeight + 'px';
    modalElement.style.left = buttonElementRect.left - (modalWidth / 2) + (buttonElementRect.width / 2) + 'px';
    
    closeElement = document.createElement('span');
    closeElement.innerHTML = 'X';
    closeElement.onclick = function () {
        modalElement.style.display = 'none';
    };
    
    modalElement.appendChild(closeElement);
    buttonElement.parentNode.appendChild(modalElement);
}