Question

I want to create a small popup using jQuery that appears when I icon is clicked. I want the top corner of the popup to overlap with the icon so that there is an intuitive connection between the small window and the button (as opposed to the current behavior where it appears in the middle of the screen). This is similar to wunderlist.com when one clicks on the clock and the calendar appears. I want to create a modal that has a calendar, a text box, and a button.

I can get the jquery modal to appear, but I can’t control it’s positioning; it always appears in the center of the screen. I’m using the code at jQuery UI

<script type="text/javascript">
    $.fx.speeds._default = 100;
    $(document).ready(function() {

        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
        });

        $( ".hold_btn" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });

    });
</script>

<button class="btn btn-primary hold_btn" type="button">Button</button>

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Answer 1

You can use method position
option-position

In you case you need to use following code.

$.fx.speeds._default = 100;
    $(document).ready(function() {
     $( ".hold_btn" ).click(function() {
            $( "#dialog" ).dialog(
                { 
                    position: {
                        my: "left top", 
                        at: "right top",
                        of: window } }

            ).dialog("show");
            return false;
        });

    });