qTip2 - Demo - Modal dialogues

With the built-in modal plugin, you can create qTip's that perform the same tasks as a modal dialogue.

HTML

<script src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/demos.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/master.css">
<div id="demo-modal">
    <span class="nice">Click Me</span>
</div>

CSS

/* Add some nice box-shadow-ness to the modal tooltip */
#ui-tooltip-modal{
    max-width: 420px;

    -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
    box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
}

#ui-tooltip-modal .ui-tooltip-content{
    padding: 10px;
}

.nice {
  cursor:pointer;        
}

JavaScript

$('.nice').qtip({
        content: {
            title: {
                text: "Click Me",
                button: true,
            },
            text: "see it works",                
        },
        show: { 
            event: 'click',   
            solo: true,
            ready: false 
        },
        hide: false,
    });