Как открыть содержимое страницы по ссылке Href, чтобы отобразить ее в диалоге пользовательского интерфейса JQuery? - PullRequest
Новая
       4

Как открыть содержимое страницы по ссылке Href, чтобы отобразить ее в диалоге пользовательского интерфейса JQuery?

4 голосов
/ 25 ноября 2010

У меня есть такая ссылка, и я хочу открыть ее содержимое и отобразить с помощью кода ниже: 

<a class="uimodal" href="/Administration/Contact">Contact</a>

Как сделать так, чтобы ссылка открывала href-контент и отображала его внутри jQuery?UI модальный диалог?

Ответы [ 4 ]

7 голосов
/ 25 ноября 2010

Лучший способ - использовать операцию загрузки Ajax для извлечения контента в новый элемент.Затем, когда данные загружены, вызовите модальный для этого элемента: 

$('a.uimodal').bind('click', function() {
   var $this = $(this);
   var outputHolder = $("<div id='.uimodal-output'></div>");
   $("body").append(outputHolder);
   outputHolder.load($this.attr("href"), null, function() {
      outputHolder.dialog(// whatever params you want);
   });
   return false;
});

AJAX Load: http://api.jquery.com/load/ Опции диалога: http://jqueryui.com/demos/dialog/

Примечание: Вы также можете отобразитьмодальный режим при загрузке страницы AJAX путем помещения outputHolder.dialog(//...) перед вызовом метода загрузки.

5 голосов
/ 25 ноября 2010

Я загружаю контент в диалоговом окне без использования IFrame. Вот как я это делаю:

Сначала вы должны инициализировать свое диалоговое окно. Вы можете использовать что-то вроде этого: 

    if(jQuery("#dialog_contact").length > 0) {
      jQuery("#dialog_contact").dialog({
            title: "File browser",
            modal: true,
            autoOpen: false,
            height: 700,
            width: 800,
            closeText: 'hide',
            open: function() {
              // Here I load the content. This is the content of your link.
              jQuery("#dialog_contact").load("../wp-content/plugins/my_plugin/somPage.php", function() {});
            }
          }
      );  
    }

  // Then open the dialog window on click
  jQuery('.uimodal').live('click', function() {
    jQuery('.dialog_contact').dialog('open')
  });

Подробнее здесь: http://jqueryui.com/demos/dialog/

1 голос
/ 25 ноября 2010

Вам нужно создать iframe и открыть его в своем диалоговом окне.

Таким образом, что-то вроде 

jQuery('<iframe/>').attr('src', jQuery('.uimodal').attr('href')).dialog('open');

Более подробно: диалоговое окно jQuery UI () может отображать толькоDOM-элементы, вам сначала нужно добавить что-то в DOM, которое отображает URL.

http://jqueryui.com/demos/dialog/

0 голосов
/ 14 декабря 2012

В этом коде размер диалога и заголовок объявляются в ссылке 

<script type="text/javascript">

    function tb_parseQuery(query) {
        var Params = {};
        if (!query) { return Params; }// return empty object
        var Pairs = query.split(/[;&]/);
        for (var i = 0; i < Pairs.length; i++) {
            var KeyVal = Pairs[i].split('=');
            if (!KeyVal || KeyVal.length != 2) { continue; }
            var key = unescape(KeyVal[0]);
            var val = unescape(KeyVal[1]);
            val = val.replace(/\+/g, ' ');
            Params[key] = val;
        }
        return Params;
    }
    $(document).ready(function () {
        $('a.uimodal').bind('click', function () {

        var $this = $(this);
        var url = $this.attr("href");



        var queryString = url.replace(/^[^\?]+\??/, '');
        var params = tb_parseQuery(queryString);
        TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
        TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
            TB_Title = (params['title']);



        $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load(url);
            },
            height: TB_HEIGHT,
            width: TB_WIDTH,
            title: TB_Title
        });
        return false;
    });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
    </div>
    </form>
</body>
</html>
...