在AJAX风格的jQuery UI选项卡中加载的jQuery UI对话窗口

AJAX标签工作得很好。这部分很简单。但是，获取AJAX UI对话框模式窗口触发链接不成功。

任何帮助，将不胜感激。

没有比那个人更容易的了。试试这个：

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

请注意，你不能从本地加载远程，所以你必须上传到服务器或任何其他。另外请注意，您无法从外部域加载，因此您应该将链接的hrefreplace为托pipe在同一个域中的文档（以下是解决方法）。

干杯

为了避免在多次点击链接时添加额外的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; });`

//正确格式化

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

只是除了nicktea的答案。这段代码加载远程页面的内容（不redirect到那里），并在closures时清理。

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

前两个答案都不适用于我的多个元素，可以打开指向不同页面的对话框。

这感觉就像是最干净的解决scheme，只在加载时创build对话框对象，然后使用事件打开/closures/适当地显示：

 $(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; }); });

好奇 – 为什么'没有比这更简单'的答案（上面）不起作用？看起来合乎逻辑？ http://206.251.38.181/jquery-learn/ajax/iframe.html

 <a href="javascript:void(0)" onclick="$('#myDialog').dialog();"> Open as dialog </a> <div id="myDialog"> I have a dialog! </div>

看到我在jsbin.com上发布的例子。

在AJAX风格的jQuery UI选项卡中加载的jQuery UI对话窗口

不间断的空间

JQuery发布JSON对象到服务器

如何在文本框中获取插入符号的（x，y）像素坐标？

jQuery函数不绑定到新添加的dom元素

如何用jQuery强制hover状态？

如何在Bootstrap中创build一个切换button

为什么$ .getJSON默默地失败？

如何获得第n个jQuery元素

如何同步两个div的滚动位置？

我如何使用jQuery从DIV中删除高度样式？