Fixed Position Example

Example of Fixed Positioning modals with jQuery, in response to Stack Overflow question: http://stackoverflow.com/questions/11254432/how-to-float-a-modal-window-in-jquery

HTML

<button id="SomeButton">Click me.</button>

<div class="myDialog hidden">
 I don't disappear when you scroll!
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

CSS

.myDialog {
    padding: 5px 10px;
    background: yellow;
    border: 1px solid #999;

    position: fixed;  /* This is the magic - stays during scroll. */
    top: 0; right: 0; /* These coordinates are now in 
                         relation to the first parent
                         with non-static positioning (body) */
}
 .hidden {
     display: none;
}

JavaScript

// Now you can just toggle on and off the "hidden"
// class to make the dialog hide/show.

$('#SomeButton').bind('click', function (ev) {
    $('.myDialog').toggleClass('hidden');
});