Sticky Popup

by kaikemono

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>

<div id="helloworld">
    
    <a 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>
    
    <div class="clear"></div>
    
</div>

CSS

#helloworld {
    float: left;
}

#helloworld > 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;
}

JavaScript

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

// give the variable global scope
var donotclose;

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

$('#helloworld').click(function(e){
   // set a variable
   donotclose = true;    
});

$('#helloworld').mouseleave(function(e) {
    e.stopPropagation();
    if (!donotclose) {
        $('.popup').fadeOut(100);
    }
});