blocks|key|1354394|text|<a+href="javascript:void(0)"+onclick="$('#myDialog').dialog();">
++Open+as+dialog
</a>

<div+id="myDialog">
I+have+a+dialog!
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1354395|See+the+example+I+posted+on+jsbin.com。|unstyled|offset|length|1354396|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/eyaqu^0|0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>&lt;a href="javascript:void(0)" onclick="$('#myDialog').dialog();"&gt;
  Open as dialog
&lt;/a&gt;

&lt;div id="myDialog"&gt;
I have a dialog!
&lt;/div&gt;
</code></pre>

<p><a href="http://jsbin.com/eyaqu" rel="nofollow noreferrer">See the example I posted on jsbin.com</a>.</p>


blocks|key|1569644|text|没有什么比那个人更容易的了。试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1569645|<?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>|code-block|syntax|javascript|1569646|请注意，您不能从本地加载远程，因此您必须将其上传到服务器或其他任何地方。还请注意，您不能从外部域加载，因此您应该替换指向同一域(和here's+the+workaround)上托管的文档的链接的href。|offset|length|1569647|干杯|1569648|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html^0|0|0|1T|L|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Nothing easier than that man. Try this one:</p>

<pre><code>&lt;?xml version="1.0" encoding="iso-8859-1"?&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" /&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .loading { background: url(/img/spinner.gif) center no-repeat !important}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;a class="ajax" href="http://www.google.com"&gt;
      Open as dialog
    &lt;/a&gt;

    &lt;script type="text/javascript"&gt;
    $(function (){
        $('a.ajax').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('&lt;div style="display:none" class="loading"&gt;&lt;/div&gt;').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;
        });
    });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Note that you can't load remote from local, so you'll have to upload this to a server or whatever. Also note that you can't load from foreign domains, so you should replace href of the link to a document hosted on the same domain (and <a href="http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html" rel="noreferrer">here's the workaround</a>).</p>

<p>Cheers</p>


blocks|key|1569688|text|//格式正确|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1569689|<script+type="text/Javascript">
++$(function+()++++
{
++++$('<div>').dialog({
++++++++modal:+true,
++++++++open:+function+()
++++++++{
++++++++++++$(this).load('mypage.html');
++++++++},+++++++++
++++++++height:+400,
++++++++width:+600,
++++++++title:+'Ajax+Page'
++++});
});|code-block|syntax|javascript|1569690|​|1569691|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>//Properly Formatted </p>

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

<p></p>


blocks|key|1569728|text|为了避免在多次单击链接时添加额外的div，并避免在使用脚本显示表单时出现问题，您可以尝试@jek代码的变体。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1569729|$('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;
});`|code-block|syntax|javascript|1569730|entityMap^0|H|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>To avoid adding extra <code>div</code>s when clicking on the link multiple times, and avoid problems when using the script to display forms, you could try a variation of @jek's code. </p>

<pre><code>$('a.ajax').live('click', function() {
    var url = this.href;
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) {
        dialog = $('&lt;div id="dialog" style="display:hidden"&gt;&lt;/div&gt;').appendTo('body');
    } 

    // load remote content
    dialog.load(
            url,
            {},
            function(responseText, textStatus, XMLHttpRequest) {
                dialog.dialog();
            }
        );
    //prevent the browser to follow the link
    return false;
});`
</code></pre>


blocks|key|1354613|text|好奇--为什么上面那个“没有什么比这个更简单”的答案不起作用？看起来合乎逻辑？http://206.251.38.181/jquery-learn/ajax/iframe.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1354614|entityMap|0|LINK|mutability|MUTABLE|url|http://206.251.38.181/jquery-learn/ajax/iframe.html^0|13|1F|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>curious - why doesn't the 'nothing easier than this' answer (above) not work?
it looks logical?
<a href="http://206.251.38.181/jquery-learn/ajax/iframe.html" rel="nofollow">http://206.251.38.181/jquery-learn/ajax/iframe.html</a></p>


blocks|key|1354664|text|前两个答案对我来说都不起作用，因为有多个元素可以打开指向不同页面的对话框。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1354665|这感觉像是最干净的解决方案，只在加载时创建一次对话框对象，然后使用事件适当地打开/关闭/显示：|1354666|$(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;
++++++});
});+|code-block|syntax|javascript|1354667|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Neither of the first two answers worked for me with multiple elements that can open dialogs that point to different pages.</p>

<p>This feels like the cleanest solution, only creates the dialog object once on load and then uses the events to open/close/display appropriately:</p>

<pre><code>$(function () {
      var ajaxDialog = $('&lt;div id="ajax-dialog" style="display:hidden"&gt;&lt;/div&gt;').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;
      });
}); 
</code></pre>


blocks|key|1569828|text|只是对尼克茶的回答的补充。这段代码加载远程页面的内容(不重定向)，并在关闭页面时进行清理。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1569829|<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>|code-block|syntax|javascript|1569830|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just an addition to nicktea's answer. This code loads the content of a remote page (without redirecting there), and also cleans up when closing it.</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function showDialog() {
        $('&lt;div&gt;').dialog({
            modal: true,
            open: function () {
                $(this).load('AccessRightsConfig.htm');
            },
            close: function(event, ui) {
                    $(this).remove();
                },
            height: 400,
            width: 600,
            title: 'Ajax Page'
        });

        return false;
    }
&lt;/script&gt;
</code></pre>


<p>The AJAX tabs work perfectly well. It's pretty straightforward with that part. However, getting the AJAX UI Dialog modal window to trigger off of a link has been unsuccessful. </p>

<p>Any help in this would be appreciated.</p>


jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

服务器

AJAX选项卡可以很好地工作。这一部分非常简单。但是，让AJAX UI Dialog模式窗口触发链接并不成功。在这方面的任何帮助都将不胜感激。

问AJAX样式jQuery UI选项卡中加载的jQuery UI对话框窗口
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AJAX样式jQuery UI选项卡中加载的jQuery UI对话框窗口EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AJAX样式jQuery UI选项卡中加载的jQuery UI对话框窗口
EN