Facebook Dialog Box

Simple Dialog box with a Triangular Edge which is positioned according to the small button out there.

by shivkumarganesh

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<br/>
<div>
<input id="selectedOption" type="text"/>
    <div id="clickButton"></div>
</div>
<br>
<div class="pointer"></div>
<div class="content">
    <div class="farziBorder">
    <div class="header">
        <i>&nbsp;Select Mentor</i> 
    <div class="cross"></div>
    </div>
    <br/>
    <div>Location :<input id="location" type="text"/></div>
    <br>
    <div>Technology:<input id="technology" type="text"/></div>
    <br>
    <div id="resources"></div>
    <div id="shadow"></div>
</div>
</div>

CSS

.farziBorder{
border:dashed 1px grey;
    padding:5px;
}
.header{
height:20px;
    background-image:url("http://static.jquery.com/ui/images/navigation_s.png");
    background-repeat:repeat-x;
    color:white;
    font-weight:bold;
}
.cross{
float:right;
background-image:url("http://cdn4.iconfinder.com/data/icons/fugue/icon/cross-script.png");
    width:16px;
    height:16px;
    cursor:pointer;
}
.highlight{
    background-color:#DBDBD9;
    
}
.unhighlight{
}
#resources{
border:solid 1px grey;
    cursor:pointer;
    background-color:#F2F2EB;
    width:auto;
    height:200px;
}
#selectedOption{
float:left;
}
#clickButton{
background-color:green;
    width:20px;
    height:20px;
    float:left;
}
.pointer{
background-image:url("http://semantic-experiments.googlecode.com/files/pointer.png");
    width:20px;
    height:25px;
    background-repeat:no-repeat;
}

JavaScript

$(document).ready(

function() {
    $('.pointer').hide();
    $('.content').hide();


    $('#clickButton').click(function() {
        $('.pointer').show();
        $('.content').show();
        //Calculate the offset to position the arrow
        var offsetClickButton = $('#clickButton').offset();
        var heightClick = (($('#clickButton').height() / 2) - 10);
        var pointerTop = offsetClickButton.top + heightClick;
        var pointerLeft = offsetClickButton.left + ($('#clickButton').width());
        //Now lets fix the pointer
        $('.pointer').attr('style', 'position:absolute;top:' + pointerTop + 'px;' + 'left:' + pointerLeft + 'px;');

        //Now Lets Fix The Div
        var divLeft = pointerLeft + $('.pointer').width();
        var divTop = pointerTop - 20;
        $('.content').attr('style', 'position:absolute;border:solid 1px black;width:300px;height:330px;padding: 10px;' + 'left:' + divLeft + 'px;top:' + divTop + 'px;');
    });

    //Data for Location and Technology
    var location = ['Mumbai', 'Hydrabad', 'Chennai', 'Bangalore'];
    var technology = [
        'Java',
        'Oracle',
        'Mainframes',
        'J2EE',
        'ASP.NET',
        'MySQL'
        ];
    var resources = [
        'Mukund Kumar',
        'Madhukar',
        'Shivam Narayanan',
        'Priyaranjan Swami',
        'Senthil Kumar',
        'Rohan Upadhaya',
        'Devi Swaminathan'
        ];
    //Loading the textBox
    $('#location').autocomplete({
        source: location
    });
    $('#technology').autocomplete({
        source: technology,
        select: function(event, ui) {
            $.each(resources, function(i, res) {
                $('#resources').append('<div class="selectText">' + res + '</div>');
            });
        }
    });

    $('.selectText').live('hover', function() {
        $(this).toggleClass('highlight', 'unhighlight');
    });
    $('.selectText').live('click', function() {
        var name = $(this).text();

       ...