JSFiddle - React, Tailwind, and code Playground
HTML
<!-- The overlay is our requirement and the button is just a trigger of
overlay and Fileice Gateway/Widget. -->
<div class="content_wrap">
<input type="button" value="Download" onClick="startGateway('145675');" id="overlayTrigger" />
</div>
<div class="fileice_overlay"></div>
CSS
body {
background: url(http://dvl-den.net/~widget/bg.jpg);
}
.content_wrap {
width: 300px;
position: relative;
margin: 10% auto;
text-align: center;
}
input[type=button] {
background: -webkit-linear-gradient(top, rgba(200, 200, 200, .5) 50%, rgba(150, 150, 150, .5) 50%);
background: -moz-linear-gradient(top, rgba(200, 200, 200, .5) 50%, rgba(150, 150, 150, .5) 50%);
background: -o-linear-gradient(top, rgba(200, 200, 200, .5) 50%, rgba(150, 150, 150, .5) 50%);
background: -ms-linear-gradient(top, rgba(200, 200, 200, .5) 50%, rgba(150, 150, 150, .5) 50%);
background: linear-gradient(top, rgba(200, 200, 200, .5) 50%, rgba(150, 150, 150, .5) 50%);
padding: 5px 15px;
color: #fff;
font-size: 10pt;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
cursor: pointer;
border: none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), inset 0 0 3px rgba(0, 0, 0, .2);
}
/* Custom Overlay */
.fileice_overlay {
background: #888;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .4;
z-index: 999;
display: none;
}
/* Transparency Trick for Fileice Gateway */
#fancybox-close, #fancybox-bg-nw, #fancybox-bg-w,
#fancybox-bg-sw, #fancybox-bg-s, #fancybox-bg-se,
#fancybox-bg-e, #fancybox-bg-ne, #fancybox-bg-n {
background: none repeat scroll 0 0 transparent !important;
display: none !important;
}
#fancybox-outer {
background: none repeat scroll 0 0 transparent !important;
}
#fancybox-overlay {
display: none !important;
}
JavaScript
$.getScript('http://fileice.net/gateway/mygate.php?id=4465766c4278366467523838');
$('#overlayTrigger').on('click', function() {
$('.fileice_overlay').fadeIn(300);
});