Comment ouvrir une URL dans une boîte de dialogue JQUERY UI

J'ai été à la recherche d'une solution simple pour un certain temps. Je veux une page (par exemple http://www.google.com) à afficher dans l'INTERFACE utilisateur de JQuery fenêtre de Dialogue. Le plan est pour plus tard, ajoutez l'URL de manière dynamique afin de tous les liens de mon site sera affiché dans ladite fenêtre.

J'ai essayé le suivant, mais la fenêtre de dialogue est vide en cliquant sur le lien.

<!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>

J'ai trouvé quelques exemples, mais aucun n'a effectivement travaillé. J'apprécierais vraiment de l'aide.

Merci d'avance.

fondamentalement, vous voulez un appel ajax est-il?

OriginalL'auteur Daniel Saad | 2013-03-17

  1. 14

    Vous n'avez pas besoin d'un iframe comme cela a été suggéré, mais vous devriez lire la documentation sur les boîtes de dialogue ici.

    Au lieu de cela, vous devez charger le contenu sur le .open à la propriété - 

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

    Aussi, vous semblez utiliser .each avec un id -- le id est censé être unique dans la page. utilisation class à la place.

    Vous ne pouvez pas utiliser .load() si l'URL est dans un autre domaine, à cause de la croix-domaine AJAX restrictions.

    OriginalL'auteur Nick Andriopoulos

  2. 6

    Vous pouvez essayer cette

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

    Code ci-dessus va créer un nouveau dialog en cliquant sur un lien sur votre page web et aussi ajouter un nom de classe myDlgClass et un id unique pour chaque boîte de dialogue comme link-1, link-2 et ainsi de suite, mais n'oubliez pas que seul le lien de la page sera chargée pas de lien externe en raison de la même origine.

    Mise à jour :

    À utiliser un site externe lien, vous pouvez utiliser un iframe, voici un exemple d'utilisation d'une iframe.

    OriginalL'auteur The Alpha

  3. 1

    Cette
    pourrait aider.. Voici ce que je fais c'est que je suis en vous déplaçant sur un lien et l'url de l'ouverture de la boîte de dialogue..
    Vous devez utiliser class au lieu de id si plusieurs balises sont se créé dynamiquement..ohterwise il va travailler pour le seul 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
                }
              });
        });

    OriginalL'auteur Anubhab

  4. 0

    Vous pouvez utiliser d'iframe:

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

    OriginalL'auteur PSR