JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<span id="click">Click</span>

JavaScript

output='';

$('#click').click(function(){
    output += '<div id="ajt-product-info">';
    output += '<style>';
    output += '  #ajt-product-info{';
    output += '    position:absolute;';
    output += '    width:100%;';
    output += '    height:100%;';
    output += '    z-index:10001;';
    output += '    background-color: rgba(1, 1, 1, 0.6);';
    output += '    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99101010, endColorstr=#99101010);';
    output += '    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99101010, endColorstr=#99101010)";';
    output += '  }';
    output += '  #details{margin:80px auto auto; width:600px; height:435px; background-color:white; position:relative; padding:15px;}';
    output += '</style>';
    output += '<div id="details">';
    output += '  <div id="info">';
    output += '    <h1>Alex Thomas</h1><span id="close">Click to close</span>';
    output += '  </div>';
    output += '</div>';
    $('body').prepend(output);
});

$('#close').live('click', function(){
  $('#ajt-product-info').remove();
});