Jquery диалог, чтобы открыть другую страницу - PullRequest
Новая
       14

Jquery диалог, чтобы открыть другую страницу

4 голосов
/ 03 мая 2010

Есть страница в виде транзакции.html

Как открыть эту страницу во всплывающем окне на другой странице, например, show_transactions.html в диалоге jquery 

       $dialog.html()  //open transaction.html in this dialog
     .dialog({
        autoOpen: true,
        position: 'center' ,
        title: 'EDIT',
        draggable: false,
        width : 300,
        height : 40, 
        resizable : false,
        modal : true,
     });
     alert('here');
     $dialog.dialog('open');

Этот код присутствует в show_transactions.html

Спасибо ..

Ответы [ 2 ]

15 голосов
/ 03 мая 2010

Вы можете использовать метод jQuery .load() для загрузки страницы в диалог, вот как: 

$("#dialog").dialog({
    autoOpen: false,
    position: 'center' ,
    title: 'EDIT',
    draggable: false,
    width : 300,
    height : 40, 
    resizable : false,
    modal : true,
});

$("#dialog_trigger").click( function() {
    $("#dialog").load('path/to/file.html', function() {
        $("#dialog").dialog("open");
    });
})

Предполагается, что у диалога есть идентификатор 'dialog' и что есть другой элемент с идентификатором 'dialog_trigger', который нажимается, чтобы открыть его. Вы поместили бы оба из них в функцию готовности вашего документа, чтобы диалоговое окно создавалось при загрузке страницы, если это не так, это вызовет небольшую, но заметную задержку для пользователя по мере его создания.

3 голосов
/ 17 марта 2014

Вы также можете сделать это ...

Создать диалоговую страницу 

<div id="MyDialogID"  title="My Dialog Title"></div>

Создать ссылку (при нажатии на эту ссылку откроется диалоговое окно) 

<a id="MyLinkToDialogID" href="Path to Dialog Page">Open My Dialog</a>

Инициализация диалога (создать событие между ссылкой и диалогом) 

$('#MyLinkToDialogID').each(function () {
    var $link = $(this);

    $.post($link.attr('href'), function (data) {
        var $dialog = $(data)
            .filter('#MyDialogID')
            .dialog({
                autoOpen: false,
                resizable: false,
                height: 240,
                width: 370,
                modal: true
            });

            $link.click(function () {
               $dialog.dialog("open");
               $dialog.css("height", "240");
               $dialog.css("width", "370px");
               $dialog.dialog({ position: 'center' });

               return false;
            });
    });
});
...