JSFiddle - React, Tailwind, and code Playground

by nsshrinivasan

HTML

<div class="bgDiv">
<div class="SNIModal_Wrap showModal" style="display: block;"><div class="SNIModal_Cover showModal" style=""></div><div id="SNIModal" class="SNIModal_Window showModal" style=""><button class="SNIModal_Close">Close</button><div id="SNIModal_Content"><form id="aim_Login" class="aim_Controls aim_Validate" novalidate=""><div class="aimSocial"><p>Log in with:</p><div id="janrainEngageEmbed"><div class="janrainContent" style="width: 213px; height: 158px; padding-left: 5px; padding-right: 5px; box-sizing: content-box; background-color: rgb(236, 232, 217); border: 1px solid transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; overflow: hidden; position: relative;"><div id="janrainView"><div id="janrainProviderPages" style="padding-top: 5px; left: 5px; top: 0px; position: absolute;"><div class="janrainPage" pageindex="0"><ul class="providers" id="janrainProviders_0" style="list-style-type: none; margin: 0px; padding: 0px;"><li style="list-style: none; height: 30px; margin-top: 0px; width: 210.5px; margin-left: 0px; margin-bottom: 5px; position: relative; border: 1px solid rgb(204, 204, 204); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; text-align: center; cursor: pointer; background-image: -webkit-linear-gradient(bottom, rgb(238, 238, 238), rgb(255, 255, 255));" class="janrain-provider-text-color-facebook" id="janrain-facebook" role="button"><a tabindex="1" style="font-family: Helvetica, 'lucida grande', Verdana, sans-serif; font-size: 12px; line-height: 14px; margin-left: auto; margin-right: auto; text-decoration: initial; display: block; padding-left: 5px; padding-right: 5px;" href="javascript:void(0);"><span class="janrain-provider-icon-24 janrain-provider-icon-facebook" style="margin-top: 3px; background-color: transparent;"></span><span style="font-family: 'lucida grande', Helvetica,...

CSS

.SNIModal_Wrap{
 background-color: blue;
 width: 240px;
position: fixed;
z-index: 9999;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -150px;
}    

.bgDiv{
  background-color: #000;  
   position: fixed;
top: 0;
left: 0;
z-index: 9998;
height: 100%;
width: 100%;
}

JavaScript

$('.SNIModal_Wrap').click(function(e){
    alert('in');
}
                          
                          
$('.bgDiv').click(function(e){
    alert('in');
}