Exit screen based on HTTP HREF links

Exit screen based on HTTP HREF links

by Andrew Pougher

HTML

<a href="http://www.andrewpougher.co.uk/">VISIT ANDREW POUGHER</a>

<div id="rampbox" class="radallsmall">
    <div id="rampwrap">
         <h3>Thank you for visiting SITENAME.com</h3>

        <p>This link will take you to another website</p>
        <p>Andrew Pougher provides this link as a service to website visitors.
            <br>SITENAME is not responsible for the Privacy Policy of any third party websites.
            <br>We encourage you to read the privacy policy of every website you visit.</p>
        <div id="ramp-buttons">
<a href="#" class="btnpurpleStd" id="cont-btn">Continue</a>
            <button class="btngreyStd" id="closeramp">Back</button>
        </div>
    </div>
</div>

CSS

body {
    background:#333333;
    font-family: arial;
    padding:30px
}
a {color:white;text-decoration:none}
#rampbox {
    text-align:center;
    margin:100px auto 30px auto;
    width:596px;
    height:244px;
    display:block;
    background: #ffffff;
    background-image: url("http://andrewpougher.co.uk/clients/nitrogen/influence/img/ramp-shape.png");
    background-repeat: no-repeat;
    background-position: 118% -80px;
       z-index:2000;
    position:absolute;
 
    opacity: 0;
}
#rampbox div#rampwrap {
    text-align:left;
    padding:40px 40px 40px 40px
}
#rampbox h3 {
    color: #0084cd;
    margin-bottom:10px
}
#rampbox p {
    font-size:85%;
    margin: 10px 0px 10px 0px
}
div#ramp-buttons {
    padding-left: 135px;
    border:1px solid #fff;
    margin:20px auto;
    max-width:596px
}
#rampbox a, #rampbox button {
    max-width:125px;
    display:inline-block;
    float:left
}
/* --- BUTTONS ------ */
 .btnpurpleStd {
    background-image: -ms-linear-gradient(top, #9043AF 0%, #520B6D 100%);
    background-image: -moz-linear-gradient(top, #9043AF 0%, #520B6D 100%);
    background-image: -o-linear-gradient(top, #9043AF 0%, #520B6D 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9043AF), color-stop(1, #520B6D));
    background-image: -webkit-linear-gradient(top, #9043AF 0%, #520B6D 100%);
    background-image: linear-gradient(to bottom, #9043AF 0%, #520B6D 100%);
    text-align: center;
    font-size: 1.2em;
    padding: 0px 11px;
    line-height: 40px;
    color: white;
    min-width: 125px;
    height: 48px;
    border: 1px solid #652490;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.btnpurpleStd:hover {
    background-image: -ms-linear-gradient(top, #9043AF 0%, #BA19F7 100%);
    background-image: -moz-linear-gradient(top, #9043AF 0%, #BA19F7 100%);
    background-image: -o-linear-gradient(top, #9043AF 0%, #BA19F7 100%);
    background-image:...

JavaScript

// button triggers for URL external
$('a[href^=http]').click(function () {
    var exithref = $(this).attr("href");
    $("#cont-btn").attr("href", exithref);
    $("#rampbox").fadeTo(350, 1);
    return false
});

$('#closeramp').click(function () {
    $("#cont-btn").attr("href", "#");
    $("#rampbox").fadeTo(350, 0);
    return false
});



//  if (url.match('^http')) {