Sticky Popup

by vendruscolo

HTML

<p>
    <b>Goal</b><br />
    Show/hide the popup on hover<br />
    Make popup sticky when user clicks on it (interacts with form)<br />
    Dismiss popup on submit
</p>

    <a id="helloworld" href="#">
        Show Form On Hover
    </a>
    
    <div class="popup">
        
        <input type="text" name="email" value="" id="email" placeholder="email"><br />
        <input type="text" name="name" value="" id="name" placeholder="name"><br />
        <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
        <input type="checkbox" name="vehicle" value="Car" /> I have a car<br />
        <input type="submit" name="" value="Submit" id="submit">            
        
    </div>

CSS

a {
    background-color: #f2f4f7;
    display: inline-block;
    line-height: 40px;
    margin-top: 1em;
    padding: 0 20px;
}

.popup {
    padding: 20px;
    background-color: yellow;
    border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px;
    margin-top: 5px;
    width: 200px;
}

JavaScript

$('.popup').hide();

$('#helloworld').mouseenter(function(e) {
    // e.stopPropagation();
    $('.popup').fadeIn(100);
});

$('.popup').mouseleave(function(e) {
    // e.stopPropagation();
    $('.popup').fadeOut(100);
});