JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<div class="openaprompt">Open a new Prompt</div>

<div class="prt_wrap" style="display:none;top:auto;left:auto;bottom:0;right:0;">
    <div class="prt_close">&times;</div>
    <div class="prt_inner">
        <div class="prt_title">Title</div>
        <div class="prt_body">
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum tincidunt vehicula. Duis a luctus tortor. Sed ullamcorper eleifend eros, fermentum pretium sapien varius id. Pellentesque turpis nisi, elementum sit amet lorem sit amet, tristique volutpat metus. Ut scelerisque aliquet eros vitae volutpat. Nulla non arcu a felis hendrerit fringilla sed eget eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sit amet quam odio. Quisque id ultrices odio.
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum tincidunt vehicula. Duis a luctus tortor. Sed ullamcorper eleifend eros, fermentum pretium sapien varius id. Pellentesque turpis nisi, elementum sit amet lorem sit amet, tristique volutpat metus. Ut scelerisque aliquet eros vitae volutpat. Nulla non arcu a felis hendrerit fringilla sed eget eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sit amet quam odio. Quisque id ultrices odio.
            
        </div>
        <div class="prt_actions">
            <div class="prt_action prt_pos">Yes</div><!--
         --><div class="prt_action prt_neg">No</div><!--
         --><div class="prt_action prt_can ">Cancel</div>
        </div>
    </div>
</div>

CSS

html, body{margin:0; padding:0; position:relative; font-family:Calibri, Arial, Sans-serif}


.prt_wrap{
    padding:10px;
    position:fixed;
    top:20px;
    left:20px;
    width:600px;
    background:#EEE;
    z-index:99999;
    font-size:16px;
}

.prt_close{
    position:absolute;
    top:-7px;
    right:-7px;
    width:26px;
    height:26px;
    border-radius:14px;
    background:#FFF;
    border:1px solid #DDD;
    font-size:20px;
    color:#AAA;
    text-align:center;
    cursor:pointer;
}

.prt_inner{
    border:1px solid #DDD;
    padding:15px;
    background:#FFF;
}

.prt_title{
    line-height:24px;
    font-size:20px;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid #CCC;
}

.prt_actions{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #CCC;
    text-align:right;
}

.prt_action{
    display:inline-block;
    background:#A55;
    color:#FFF;
    width:60px;
    text-align:center;
    line-height:28px;
    margin-left:10px;
    border-radius:2px;
}


.openaprompt{
    padding:5px 7px; background:#A55; color:#FFF; display:inline-block; margin: 10px 5px 0; cursor:pointer;
}

.openaprompt:hover{
    background:#A66;
}

JavaScript

var dummytext = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum tincidunt vehicula. Duis a luctus tortor. Sed ullamcorper eleifend eros, fermentum pretium sapien varius id. Pellentesque turpis nisi, elementum sit amet lorem sit amet, tristique volutpat metus. Ut scelerisque aliquet eros vitae volutpat. Nulla non arcu a felis hendrerit fringilla sed eget eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sit amet quam odio. Quisque id ultrices odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum tincidunt vehicula. Duis a luctus tortor. Sed ullamcorper eleifend eros, fermentum pretium sapien varius id. Pellentesque turpis nisi, elementum sit amet lorem sit amet, tristique volutpat metus. Ut scelerisque aliquet eros vitae volutpat. Nulla non arcu a felis hendrerit fringilla sed eget eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sit amet quam odio. Quisque id ultrices odio."

function QPrompt(body,title){
    if(body){
        var self = this;
        this.isVisible = true;
        this.$prt = $('<div/>', {class:'prt_wrap'}).appendTo($('body')).draggable();
        this.$cls = $('<div/>', {class:'prt_close', html:'&times;'}).on('click',function(){ 
            self.close();
        }).appendTo(this.$prt);
        this.$inn = $('<div/>', {class:'prt_inner'}).appendTo(this.$prt);
        if(title){
            this.$tit = $('<div/>', {class:'prt_title', text:title})
            this.$tit.appendTo(this.$inn);
        }
        this.$bod = $('<div/>', {class:'prt_body', text:body})
        this.$bod.appendTo(this.$inn);
        this.show = function(){
            this.$prt.show();
            this.isVisible = true;
        };
        this.close = function(){
            this.$prt.remove();
        };
        this.position = function(){
            var dims = [
               ...