JSFiddle - React, Tailwind, and code Playground

by halvorsen82

HTML

<div class="content">
Here is my content, with a beautiful coloured background
<p>Some strange text in this div</p>

<div class="button">Open custom modal</div>

</div>

<div class="modal"></div>
<!-- Content is put outside modal background in order to have non opague content without using images OBS: z-index is now important! -->
<div class="modalContent">
I'm the content! 
    <p>Close by clicking outside this content</p>
</div>

CSS

.content
{
    height: 300px;
    background-color: #7f7f99;
    
    padding: 10px;
}
.button
{
    height: 23px;
    width: 150px;
    border: 1px solid #555;
    background-color: #999;
        
    text-align: center;
    cursor: pointer;
    
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    margin:10px 0px 10px 0px;
}
.modal
{
    
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    
    background-color: #000;
    
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
    z-index: 1000; /* Important to set this */
    
    display: none;
}

.modalContent
{
    position: absolute;
    top: 75px;
    width: 400px;
    height: 250px;
    left: 300px;
    
    padding: 20px;
    
    background-color: #FFF;
    border: 4px solid #333;
    z-index: 1001; /* Important to set this higher than .modal */
    
    display: none;
}

JavaScript

$("div.button").click( function (e)
{
    // Open the modal
    if(!$("div.modal").is(':visible'))
    {
        $("div.modal").show(100);
        $("div.modalContent").delay(150).show(400);
    }
});

$("div.modal").click( function ()
{
    // Close the modal
    if($("div.modal").is(':visible'))
    {
        $("div.modal").delay(200).hide(100);
        $("div.modalContent").hide(200);
    }
});

$("div.modalContent").click( function (e)
{
    // If you put the modal content inside modal background you need to
    // stop propagation of the click event so that clicking inside
    // the modal content doesn't close the modal
    
    // Prevent click event to bubble up to div.modal
    //e.stopPropagation();
});