helper popovers - hide on blur

for new visitors to the app, to show them a hint for their first time. On the blur event, the popover goes away and a cookie (or localStorage key/value pair) is set to prevent it from showing again. Like "featureHintSeen:true"

by jorgeluis

HTML

<h1>Page header</h1>
<p class="firstpara">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<div class="buyForm">
    <a class="btn" href="#">This modal</a>
    <div class="modal">
        <p>Confirm this click</p>
        <form action="/">
            <button type="button">OK</button>
        </form>
    </div>
</div>

<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<div class="buyForm">
    <a class="btn" href="#">That modal</a>
    <div class="modal">Confirm that click</div>
</div>

CSS

.modal { 
    display:none;
    position:absolute;
    width: 300px;
    min-height: 200px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
    background-color: #fff;
    border: solid 1px #ccc;
}

JavaScript

$(document).on('click', function(e){
    if (e.target.className != "modal") {
        alert('not the modal');
    }
   var $btn = $(this),
    confirmSheet = $btn.next('.modal');

    $('.modal').hide();
    confirmSheet.show();
});