Position simplemodal modal on top of an existing d

Question

I'm trying to position a modal dialog on top of an existing div, using simplemodal plugin.

Here's my code; it's not working:

jQuery(function ($) {

    $('.slider-caption .basic').click(function (e) {

        var p = $("#slider1");
        var position = p.position();

        $('#basic-modal-content').modal({
            position: "absolute",
            left: position.left,
            top: position.top
        });

        return false;
    });
});

It's still drawing in the middle of the window. I've also tried to set autoPosition option to false, but that just makes it draw below the existing content at the left.

I'm using version 1.4.1 of simplemodal.

Answer 1

Here's what I did to get it to work:

jQuery(function ($) {
    $('.slider-caption .basic').click(function (e) {

        var position = $("#slider1").offset();

        $('#basic-modal-content').modal({
            appendTo: "#slider1",
            autoPosition: false,
            position: "absolute",
            left: position.left,
            top: position.top
        });

        return false;
    });
});

Answer 2

Actually there's extraneous stuff in there. it's just the appendTo which does it, really nice:

jQuery(function ($) {
    $('.slider-caption .basic').click(function (e) {

        $('#basic-modal-content').modal({appendTo:"#slider1", autoPosition: false,});

        return false;
    });
});