JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

HTML

<input id="btn1" name="submit" type="submit" value="Demo here" />
<div class="blackout">
</div>
<div class="msgbox">
<div class="closeBox">
Close</div>
<br /><br /><br /><br />
<center>
<form action="#" method="post">You can put anything here :)<br />
<label><a href="#">CLICK HERE</a> to add me on FB.</label>
</form>
</center>
</div>

CSS

.blackout {
background-color:#000;
opacity:.7;
filter:alpha(opacity=70);
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
display:none;
cursor:pointer;
}
.msgbox {
background-color:#ccc;
border:1px solid #ccc;
color:#000;
width:30%;
height:30%;
position:fixed;
top:20%;
left:15%;
border-radius:20px;
padding:10px;
z-index:101;
display:none;
margin-left: 20%;
}
.closeBox {
background-color:#CC0000;
color:#FFFFFF;
padding:8px;
float:right;
border-radius:3px;
cursor:pointer;
text-transform:uppercase;

}

JavaScript

//This is the function that closes the pop-up
function endBlackout(){
$(".blackout").css("display", "none");
$(".msgbox").css("display", "none");
}

//This is the function that starts the pop-up
function strtBlackout(){
$(".msgbox").css("display", "block");
$(".blackout").css("display", "block");
}

//Sets the buttons to trigger the blackout on clicks
$(document).ready(function(){
$("#btn1").click(strtBlackout); // open if btn is pressed
$(".blackout").click(endBlackout); // close if click outside of popup
$(".closeBox").click(endBlackout); // close if close btn clicked

// Automatically trigger the pop-up after 10 seconds
setTimeout( strtBlackout, 10000);
});