qTip2 - Demo - Modal dialogues

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

by Reigel Gallarde

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">
<div id="demo-modal">
    Click <a href="#" class="button">here</a> to see a qTip modal dialogue.

    <div style="display: none;">
        Heres an example of a natural extension to qTip... use as a <b>modal dialogue</b>!
        <br /><br />
        Much like the <a href="http://onehackoranother.com/projects/jquery/boxy/">Boxy</a> plugin, but if you're already
        using qTip on your page, why not utilise the same library for your dailogues too?
    </div>
</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;
    background: #E8F1FF;
    width: 400px;
    height: 300px;
}

.ui-tooltip, .qtip {
    font-size: 12px;
}

JavaScript

$(document).ready(function()
{
    var html = '<p>Try <a href="#" class="upload">Upload</a></p><p>Try <a href="#" class="close">Close</a></p>';
    $('a.button').qtip(
    {
        id: 'modal', // Since we're only creating one modal, give it an ID so we can style it
        content: {
            text: function(){
                var h = $(html);
                h.find('a.close').click(close_dialogue)
                .end().find('a.upload').qtip(qtip_upload);
                return h;
            },
            title: ''
        },
        position: {
            my: 'center', // ...at the center of the viewport
            at: 'center',
            target: $(window)
        },
        show: {
            event: 'click', // Show it on click...
            solo: true, // ...and hide all other tooltips...
            modal: true // ...and make it modal
        },
        hide: false,
        style: 'ui-tooltip-light'
    });
    
    
    
    var close_dialogue = function(){
        $('#qtip-overlay').hide();
        $('a.button').qtip('hide');
        return false;
    }
    
    var html_for_upload = '<input name="f" type="file" /> <button>Submit</button>';
    
    var qtip_upload = {
            content: {
               text: html_for_upload, 
               title: {
                  text: 'Add a Photo',
                  button: true
               }
            },
            position: {
               my: 'left top', 
               at: 'right top' 
            },
            show: {
               event: 'click' 
            },
        hide: {
            event: 'unfocus'
        },
            style: {
               classes: 'ui-tooltip-light'
            }
         }
    
    
});