Comment puis-je ouvrir une page de contenu à partir d'un Href lien pour l'afficher à l'intérieur d'un JQuery UI Dialog?

J'ai un lien de ce genre et je veux ouvrir son contenu et de l'afficher à l'aide du code ci-dessous:

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

Comment puis-je faire ce lien ouvrir le href du contenu et de l'afficher à l'intérieur de jQuery UI boîte de dialogue modale?

OriginalL'auteur Paul | 2010-11-25

  1. 7

    Le meilleur moyen est d'utiliser Ajax opération de Chargement pour récupérer le contenu dans un nouveau élément. Ensuite, lorsque les données sont chargées, appelez le modal sur cet élément:

    $('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 Charge: http://api.jquery.com/load/
    Boîte De Dialogue Options: http://jqueryui.com/demos/dialog/

    Remarque: Vous pouvez aussi afficher l'modal, tandis que l'AJAX est la page de chargement en mettant outputHolder.dialog(//...) avant d'appeler la méthode load.

    J'ai essayé votre code... Mais le lien s'ouvre Modale et après charge le contenu dans une nouvelle page...
    Oups, édité. Oublié d'ajouter le return false; à la fin de l'événement click. Ceci est nécessaire afin d'empêcher le clic de la multiplication.

    OriginalL'auteur bmancini

  2. 5

    Je suis le chargement de contenu dans une boîte de dialogue sans utilisation d'IFrame. C'est comment je le fais:

    Vous devez d'abord initilize votre boîte de dialogue. Vous pouvez utiliser quelque chose comme ceci:

        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')
  });

    Voir plus d'infos ici: http://jqueryui.com/demos/dialog/

    OriginalL'auteur Steven

  3. 1

    Vous devrez créer un iframe et ouvrez-le dans votre boîte de dialogue.

    Donc, quelque chose comme

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

    Plus en détail:
    Le jQuery UI dialog() peut uniquement afficher les DOM-éléments, vous devez d'abord ajouter quelque chose à votre DOM qui affiche l'URL.

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

    OriginalL'auteur Kissaki

  4. 0

    Dans cette boîte de dialogue code de la taille et le titre est déclarer en lien

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

    OriginalL'auteur hamid reza mansouri