我正在使用 jQuery 并尝试在单击链接时打开一个基本对话框。您在此处的小提琴中看到的图像每个都用作链接。单击时,链接到的文本会显示在新的浏览器选项卡中,但不会生成对话框(应包含链接到的文本)。谁能告诉我我做错了什么,好吗?
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>