Окно диалога jQuery UI, загруженное в виде вкладок jQuery UI в стиле AJAX - PullRequest
Новая
       17

Окно диалога jQuery UI, загруженное в виде вкладок jQuery UI в стиле AJAX

59 голосов
/ 01 мая 2009

Вкладки AJAX работают на отлично. Это довольно просто с этой частью. Однако получить модальное окно AJAX UI Dialog для запуска ссылки не удалось.

Любая помощь в этом будет оценена.

Ответы [ 7 ]

120 голосов
/ 25 сентября 2009

Нет ничего проще, чем этот человек. Попробуйте это: 

<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <style>
        .loading { background: url(/img/spinner.gif) center no-repeat !important}
    </style>
</head>
<body>
    <a class="ajax" href="http://www.google.com">
      Open as dialog
    </a>

    <script type="text/javascript">
    $(function (){
        $('a.ajax').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog({
                // add a close listener to prevent adding multiple divs to the document
                close: function(event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                },
                modal: true
            });
            // load remote content
            dialog.load(
                url, 
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            //prevent the browser to follow the link
            return false;
        });
    });
    </script>
</body>
</html>

Обратите внимание, что вы не можете загрузить удаленное из локального, поэтому вам придется загрузить это на сервер или что-то еще. Также обратите внимание, что вы не можете загружать из чужих доменов, поэтому вы должны заменить ссылку на документ, размещенный в том же домене, и вот обходной путь ).

Приветствия

34 голосов
/ 12 февраля 2011

Чтобы избежать добавления дополнительных div с при многократном нажатии на ссылку и избежать проблем при использовании сценария для отображения форм, вы можете попробовать вариант кода @ jek. 

$('a.ajax').live('click', function() {
    var url = this.href;
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
    } 

    // load remote content
    dialog.load(
            url,
            {},
            function(responseText, textStatus, XMLHttpRequest) {
                dialog.dialog();
            }
        );
    //prevent the browser to follow the link
    return false;
});`
24 голосов
/ 10 февраля 2011

// Правильно отформатированный 

<script type="text/Javascript">
  $(function ()    
{
    $('<div>').dialog({
        modal: true,
        open: function ()
        {
            $(this).load('mypage.html');
        },         
        height: 400,
        width: 600,
        title: 'Ajax Page'
    });
});

11 голосов
/ 13 апреля 2012

Просто дополнение к ответу nicktea. Этот код загружает содержимое удаленной страницы (без перенаправления туда), а также очищается при ее закрытии. 

<script type="text/javascript">
    function showDialog() {
        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load('AccessRightsConfig.htm');
            },
            close: function(event, ui) {
                    $(this).remove();
                },
            height: 400,
            width: 600,
            title: 'Ajax Page'
        });

        return false;
    }
</script>
5 голосов
/ 20 октября 2011

Ни один из первых двух ответов не работал для меня с несколькими элементами, которые могут открывать диалоги, указывающие на разные страницы.

Это похоже на самое чистое решение, он только один раз создает объект диалога при загрузке, а затем использует события для соответствующего открытия / закрытия / отображения: 

$(function () {
      var ajaxDialog = $('<div id="ajax-dialog" style="display:hidden"></div>').appendTo('body');
      ajaxDialog.dialog({autoOpen: false});
      $('a.ajax-dialog-opener').live('click', function() {
          // load remote content
          ajaxDialog.load(this.href);
          ajaxDialog.dialog("open");
          //prevent the browser from following the link
          return false;
      });
});
0 голосов
/ 12 марта 2011

любопытно - почему не работает ответ «ничего проще, чем этот» (выше)? это выглядит логично? http://206.251.38.181/jquery-learn/ajax/iframe.html

0 голосов
/ 01 мая 2009 
<a href="javascript:void(0)" onclick="$('#myDialog').dialog();">
  Open as dialog
</a>

<div id="myDialog">
I have a dialog!
</div>

См. Пример, который я разместил на jsbin.com .

...