0

请查看此jsFiddle ...

这是一个 jQuery UI 对话框，利用 ajax 请求来提取内容。我似乎无法弄清楚出了什么问题，但除了空白对话框之外什么都没有弹出。

HTML...

<div id="#griffin"></div>
<ul>
    <li>
        <a href="ajax/ajax-bj.html" class="griffin-style all-about-bj" id="all-about-bj"></a>
    </li>
</ul>

JavaScript...

$(function() {
    $("#griffin").dialog({
        autoOpen: true,
        modal: true,
        width: 950,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "I have Read and Understand": function() {
                $(this).dialog("close");
            }
        }
    });
        $(".griffin-style").on("click", function(e) {
            e.preventDefault();
            $("#griffin").html("");
            $("#griffin").dialog("option", "title", "Loading...").dialog("open");
            $("#griffin").load(this.href, function() {
                $(this).dialog("option", "title", $(this).find("h1").text());
                $(this).find("h1").remove();
            });
        });
    });

想法？

4

2 回答 2

1

您需要添加一个 jQuery UI 对话框打开功能

http://api.jqueryui.com/dialog/#method-open

您将不得不在本地或在同一台服务器上运行它，因为 jsfiddle 由于相同的来源策略而无法提取您的外部文件

http://jsfiddle.net/aEwUF/7/

$(function() {
    $("#griffin").dialog({
        autoOpen: true,
        modal: true,
        width: 950,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "I have Read and Understand": function() {
                $(this).dialog("close");
            }
        },
                    // add this
        open:function(event,ui){
                $("#griffin").html("");
                $("#griffin").load($(".griffin-style").attr("href"), function() {
                $("#griffin").dialog("option", "title", $(this).find("h1").text());
                $(".griffin-style").find("h1").remove();
            }); 
        }
    });


     $(".griffin-style").on("click", function(e) {
                e.preventDefault();
                $("#griffin").html("");
                $("#griffin").dialog("option", "title", "Loading...").dialog("open");
                $("#griffin").load(this.href, function() {
                    $("#griffin").dialog("option", "title", $(this).find("h1").text());
                    $(this).find("h1").remove();
                });
    }); 

 });
于 2013-11-14T18:04:30.407 回答
1

您必须在buttons参数下给出命令。

http://jsfiddle.net/aEwUF/4/

  $(function() {
    $( "#griffin" ).dialog({
      resizable: false,
      height:150,
      modal: true,
      buttons: {
        "I have read and understand the terms": function() {
          $( this ).dialog( "close" );
          $("p").html("You have accepted the terms");
          //write ajax requests in here..
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
于 2013-11-14T18:08:19.717 回答