Как я могу изменить размер и переместить окно shadowbox / greybox для отображения в определенном элементе div?

Question

Хотелось бы узнать, можно ли изменить размер и переместить окно серого или теневого окна для отображения в определенном элементе div?

Я создаю шаблон для сайта WordPress и использую календарь по умолчанию, но когда вы нажимаете на дату внутри календаря, действие по умолчанию - открыть его в новом окне.

Можно ли модифицировать greybox или shadowbox таким образом, чтобы при нажатии на дату окно открывалось над календарем, отображая содержимое в нем, а не новую страницу?

Или есть другой способ достижения желаемого результата, может быть, с помощью jQuery или Javascript?

Любая помощь будет принята с благодарностью, спасибо заранее!

Answer 1

jQuery UI имеет виджет Dialog , который может достичь вашего результата. Вы можете использовать это так:

$(document).ready( function() {

    // This will initialize the dialog box and hide it by default.
    // You can find a list of most options here: http://docs.jquery.com/UI/Dialog
    $("#dialog").dialog({
        autoOpen: false,
        modal : true,
    });

    // This will select the links like you specified
    $('#wp-calendar a').click( function(e) {
        e.preventDefault() // Disable the link from going to a new page
        var url = $(this).attr("href"); // Pull the HRef for the link for making the AJAX request

        // This will make an AJAX request and put the result in the dialog.
        $("#dialog").empty().load(url, function() {

            // This is the callback for when the AJAX request finishes
            // All it does it open the dialog, which now has data in it
            $("#dialog").dialog("open");
        });
    });
});

Примечание. Для этого вам необходимо установить jQuery UI , и вам, вероятно, захочется прочитать о Dialog здесь . Вам нужно будет сделать больше шагов, если вы хотите, чтобы это ухудшалось изящно, и в зависимости от вашей разметки. Если бы вы могли опубликовать фрагмент «дня» в календаре, я могу попытаться адаптировать его к вашим потребностям.

---

Редактировать. Допустим, файл, возвращающий отрендеренную страницу для события, - "/ajax/event.php?id=123". Сначала нужно запретить поведение ссылки по умолчанию (переход на новую страницу). ); тогда вы захотите использовать функцию загрузки jQuery для загрузки собранных данных URL в диалог; как только этот запрос завершится, вы захотите открыть диалоговое окно. Я отредактировал код, чтобы сделать это, и он будет постепенно ухудшаться для пользователей, у которых не включен JavaScript.