Wie öffnen Sie eine URL im Dialogfeld JQUERY UI

Ich habe auf der Suche für eine einfache Lösung, für einige Zeit. Ich möchte eine Seite (zum Beispiel http://www.google.com) angezeigt werden, in ein JQuery-UI-Dialog-Fenster. Der plan ist, später fügen Sie die URL dynamisch, so werden alle links von meiner Website angezeigt werden, sagte Fenster.

Ich habe Folgendes versucht, aber das dialog-Fenster ist leer, wenn Sie auf den link klicken.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>


<meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
$(document).ready(function() {
    $('#openwindow').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: $link.attr('title'),
                width: 500,
                height: 300
            });

        $link.click(function() {
            $dialog.dialog('open');

            return false;
        });
    });
});
  </script>

</head>
<body>
<a id="openwindow" href="http://www.google.com">Click me to test.</a>
</body>
</html>

Fand ich ein paar Beispiele, aber keines funktionierte. Ich würde wirklich zu schätzen einige helfen.

Vielen Dank im Voraus.

  • im Grunde wollen Sie einen ajax-Aufruf ist es?
InformationsquelleAutor Daniel Saad | 2013-03-17
  1. 14

    Brauchen Sie nicht eine iframe wie schon vorgeschlagen, aber Sie sollten Lesen Sie die Dokumentation zu Dialogen hier.

    Stattdessen müssen Sie zum laden der Inhalte auf den .open Eigenschaft --

    $( "#openwindow" ).dialog({
 open: function(event, ui) {
   $('#divInDialog').load('test.html', function() {
     alert('Load was performed.');
   });
  }
});

    Auch, Sie scheinen zu verwenden .each mit einem id -- die id soll innerhalb der Seite eindeutig sein. verwenden class statt.

    • Sie können nicht .load() wenn sich die URL in einer anderen Domäne, aufgrund von cross-domain-AJAX Einschränkungen.
    InformationsquelleAutor Nick Andriopoulos
  2. 6

    Können Sie versuchen, diese

    $(function(){
    $('a').on('click', function(e){
        e.preventDefault();
        $('<div/>', {'class':'myDlgClass', 'id':'link-'+($(this).index()+1)})
        .load($(this).attr('href')).appendTo('body').dialog();
    });
});

    Obige code erstellt eine neue dialog auf einen Klick auf einen beliebigen link auf Ihre Seite und auch der name einer Klasse myDlgClass und eine eindeutige id für jeden dialog wie link-1, link-2 und so weiter, aber denken Sie daran, dass nur die Seite geladen wird, nicht in einem externen link, weil der same-origin-policy.

    Update :

    Verwenden Sie eine externe Website verlinken, können Sie eine iframe hier ist ein Beispiel der Verwendung von iframe.

    InformationsquelleAutor The Alpha
  3. 1

    Diese
    könnte helfen.. Hier das, was ich Tue, ich bin, schwebt auf einen link und die url öffnen in einem Dialogfeld..
    Sollten Sie verwenden class statt id wenn mehrere gleiche tags werden immer dynamisch erstellt..ohterwise es wird funktionieren, nur für einzelne id.

    $('.openwindow').click(function(){
var $this=$(this);
         $.ajax({
                url: $this.attr('href');//You got the link here
                success: function(data) {
                    //show the dialog here..
                    //"data" contains the html returned by the url
                },
                error: function(jqXHR){
                    //Do something here
                }
              });
        });
    InformationsquelleAutor Anubhab
  4. 0

    Können Sie iframe:

     $("#iframeId").attr("src", $(this).attr("href"));
 $('#dialogId').dialog('open');
    <div id="divId" >
    <IFRAME id="iframeId"  SRC="" width="" height = "" >
</div>
    InformationsquelleAutor PSR
Schreibe einen Kommentar