Position simplemodal modal on top of an existing div

问题

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.

回答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;
    });
});

回答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;
    });
});

来源：https://stackoverflow.com/questions/4160138/position-simplemodal-modal-on-top-of-an-existing-div