JSFiddle - React, Tailwind, and code Playground

by jpark7ca

HTML

<div id="almd-alert-dlg">
    <p>Alabama citizens are being targeted by phone calls from a person claiming to be from the U.S....<a href="#" id="almd-alert-proceed" >Read more</a></p>
    <div>
        <a href="#" id="almd-alert-postpone">Remind me later (tomorrow)</a><br /><br />
        <a href="#" id="almd-alert-cancel">(X) Don't show this message again</a>
    </div>
</div>

CSS

div#almd-alert-dlg {
  display: none;
  /*position: absolute;*/
  /*width: 280px;*/
  padding: 10px;
  background: #dc5d48;
  color: #ffffff;
  border: 1px solid #dc5d48;
  font-size: 100%;
}

div#almd-alert-dlg a#almd-alert-proceed {
    color: #ffff99;
}

div#almd-alert-dlg a#almd-alert-postpone {
    color: #ffff99;
}

div#almd-alert-dlg a#almd-alert-cancel {
    color: white;
}

JavaScript

$(function() {    
    ///
    /// starts here
    ///
    var cookieval = getALMDAlertCookie("almd_alert_cookie");    
    
    // new
    if(cookieval == null){           
        setALMDAlertCookie("almd_alert_cookie", "started", 3);
        
        $("div#almd-alert-dlg").show();
        
    }
    else if(cookieval != "completed") // postpone
    {               
        if(cookieval != "started"){
            var exdate = new Date(cookieval);
            if(new Date() > exdate.setDate(exdate.getDate() + 1)){
                $("div#almd-alert-dlg").show();
            }
        }else{                        // started without any action            
            // show
            $("div#almd-alert-dlg").show();
        }
    }
    
    $(document).on("click", "a#almd-alert-proceed", function (e) {
        e.preventDefault();
        
        setALMDAlertCookie("almd_alert_cookie", "completed", 3);
        $("div#almd-alert-dlg").hide();
        
        //window.location.herf = "https://www.almd.uscourts.gov/alerts/be-aware-jury-scams";
        window.open("https://www.almd.uscourts.gov/alerts/be-aware-jury-scams");
    });
    
    $(document).on("click", "a#almd-alert-postpone", function (e) {
        e.preventDefault();
        
        var exdate = new Date();
        
        setALMDAlertCookie("almd_alert_cookie", exdate.toUTCString(), 3);
        $("div#almd-alert-dlg").hide();
    });
    
    $(document).on("click", "a#almd-alert-cancel", function (e) {
        e.preventDefault();
        
        setALMDAlertCookie("almd_alert_cookie", "completed", 3);
        $("div#almd-alert-dlg").hide();
    });
    
    function setALMDAlertCookie(cookiename, cookievalue, days)
    {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + days);
        var c_value = escape(cookievalue) + ((days == null) ? "" : "; expires="+exdate.toUTCString())
        document.cookie = cookiename + "=" +c_value + "; path=" + escape("/");
    }
    
   ...