JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//csl.nsta.org/wp-content/themes/magazine-pro/js/jquery.fancybox.pack.js?v=2.1.5"></script>
<div style="display:none">
    <a class="fancybox" href="#donation-info" alt=""></a>
    <div id="donation-info">
       <h2>To all our readers:</h2>
       <p>some text goes here</p>
        <div style="text-align:center"><a href="/somepage" id="donate" class="donate-link" >Donate</a></div>
    </div>
</div>

CSS

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background-color: rgba(0,0,0,0.85);
	color: #fff;
	text-shadow: none;
	border-bottom: 12px solid #ffbd11;
	border-top: 44px solid #ffbd11;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url(images/closebox.png);
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url(fancybox_loading.gif) center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -40px;
	right: 4px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
	background-color: #ffbd11;
	border: 1px solid #000;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url(blank.gif); /* helps IE */
	-webkit-tap-highlight-color:...

JavaScript

$(function () {
    // Define cookie name
    var cookieName = 'hide_donate';

    // Configure fancy box
    var $fancybox = $(".fancybox").fancybox({
        // Options...
            .attr('rel', 'gallery'),
                padding : 0,
                'autoDimensions': false,
                'autoSize': false,
                'width': '650', 
                'height': 'auto'

        beforeLoad: function() {
            // Returning false will stop fancybox from opening
            return !! $.cookie(cookieName);
        },
        afterClose: function() {
            // Set cookie to hide fancybox for 1 day
            $.cookie(cookieName, true, { expires: 1 });
        } 
    }

    // Handle donate click event
    $('a#donate').on('click', function (event) {
        event.preventDefault(); 

        // Hide fancybox and set cookie to hide fancy box for 7 days
        $fancybox.hide();
        $.cookie(cookieName, true, { expires: 7 });
    });
});
// Launch fancyBox on first element
setTimeout(function(){$(".fancybox").eq(0).trigger('click');},2000)