jQuery 基本对话框不显示

Question

我正在使用 jQuery 并尝试在单击链接时打开一个基本对话框。您在 Fiddle 中看到的图像 here每个功能作为一个链接。单击时，链接到的文本会显示在新的浏览器选项卡中，但不会生成对话框(应包含链接到的文本)。谁能告诉我我做错了什么？

CSS:

.circle {
width: 250px;
height: 250px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
display: inline-block;
/*margin-right: 20px;*/

/* text styling */
font-size: 45px;
color: #FFF;  
line-height: 250px;
text-align: center;
font-family: Ubuntu, sans-serif;
}

.industry { background: #DD4814; margin-left: 5%; margin-right: 5%; }
.in-house { background: #AEA79F; margin-left: 5%; margin-right: 10%; }
.lawfirms { background: #5E2750; margin-left: 16%; margin-right: 5%; }
.industry-box-shadow { box-shadow: 0px 0px 2px 2px #DD4814 }
.in-house-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.lawfirms-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.text { line-height: 45px; padding-top: 50px; height: 200px }

.loading { position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px;             }

HTML:

<div id="sf">

    <a href="dialogcontent/lawfirms.html" title="Law firms">
        <div class="circle lawfirms lawfirms-box-shadow">Law firms</div>
    </a> 
    <a href="dialogcontent/industry.html" title="Industry">
        <div class="circle industry industry-box-shadow">Industry</div>
    </a> 
    <a href="dialogcontent/in-house.html" title="In-house legal counsel">
    <div class="circle in-house in-house-box-shadow text">In-house
            legal counsel</div> 
    </a>

</div>

Javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    var $loading = $('<img src="images/loading.gif" alt="Loading ..." class="loading">');

    $('#sf a').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());
        var $link = $(this).one('click', function() {
            $dialog
                .load($link.attr('href') + ' #content')
                .dialog({
                    title: $link.attr('title'),
                    width: 500,
                    height: 300
                });

            $link.click(function() {
                $dialog.dialog('open');

                return false;
            });

            return false;
        });
    });
});
</script>

Answer 1

首先你必须在你的 fiddler 中加载 jQuery 和 jQuery UI，接下来你不能在点击事件中使用 var $dialog 如果它只定义在 $.each 参见 here in the Fiddle

 $(document).ready(function () {
    var $loading = $('<img src="http://ubuntuone.com/5qQ3i4ctM8HAvRsSIZKgqd" alt="Loading ..." class="loading">'); 
    var $dialog = $('<div></div>')

    $('#sf a').each(function () {

             $dialog.append($loading.clone());
        var $link = $(this).one('click', function () {
            $dialog.load($link.attr('href') + ' #content')
                .dialog({
                title: $link.attr('title'),
                width: 500,
                height: 300
            });

            $link.click(function (e) {

            //    e.preventDefault();
                $dialog.dialog('open');

                return false;
            });

            return false;
        });
    });