我正在创建一个基于元素周期表的小网页，并且我正在尝试制作它，以便如果要单击元素的正方形，将弹出一个对话框以显示化合物列表. 我在显示带有自定义主题的 jQuery 对话框时遇到了问题，该主题是我在 jQuery 的 ThemeRoller 生成的，但是 - 它仅在左上角显示为纯文本，据我所知，我已经提供了相关的 JS 和 CSS 文件的必要链接。
我之前确实有一个工作版本，但我也计划在对话框中使用多个主题（努力使它们为正方形进行颜色编码），现在尝试实现它基本上已经将所有内容都抛出了一个循环。即使浏览此处的各种其他相关问题也被证明是徒劳的，更不用说关于使用多个主题的 Filament 帖子的链接 ( http://filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/ )。目前我只有一个主题活动。
这是代码 - 我为笨重的尺寸道歉（一张有 100 多个单元格的表格并不小......）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>The Periodic Table of Elements</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" href="js/jquery-ui-1.10.3/themes/blue/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
</head>
<body>
<h3>The Periodic Table of Elements</h3>
<div class="container">
<table width="100%" align="center" cellspacing="1px" cellpadding="1px">
<tr>
<th><p>Group<br/>Period</p></th>
<th><p>1</p></th>
<th><p>2</p></th>
<th><p>3</p></th>
<th><p>4</p></th>
<th><p>5</p></th>
<th><p>6</p></th>
<th><p>7</p></th>
<th><p>8</p></th>
<th><p>9</p></th>
<th><p>10</p></th>
<th><p>11</p></th>
<th><p>12</p></th>
<th><p>13</p></th>
<th><p>14</p></th>
<th><p>15</p></th>
<th><p>16</p></th>
<th><p>17</p></th>
<th><p>18</p></th>
</tr>
<tr>
<td id="number"><p><b>1</b></p></td>
<td>
<div class="element" id="hydrogen" style="background: #6699FF;">
<div class="number"><h6>1</h6></div>
<div class="symbol"><h4>H</h4></div>
<div class="weight"><h5>1.008</h5></div>
</div>
</td>
<td colspan="16"><p>Click on an element square to view associated compounds:</p></td>
<td>
<div class="element" id="helium" style="background: #FFCC33;">
<div class="number"><h6>2</h6></div>
<div class="symbol"><h4>He</h4></div>
<div class="weight"><h5>4.0026</h5></div>
</div>
</td>
</tr>
<tr>
<td id="number"><p><b>2</b></p></td>
<td>
<div class="element" id="lithium" style="background: #6699FF;">
<div class="number"><h6>3</h6></div>
<div class="symbol"><h4>Li</h4></div>
<div class="weight"><h5>6.94</h5></div>
</div>
</td>
<td>
<div class="element" id="beryllium" style="background: #6699FF;">
<div class="number"><h6>4</h6></div>
<div class="symbol"><h4>Be</h4></div>
<div class="weight"><h5>9.012</h5></div>
</div>
</td>
<td colspan="10"></td>
<td>
<div class="element" id="boron" style="background: #FFCC33;">
<div class="number"><h6>5</h6></div>
<div class="symbol"><h4>B</h4></div>
<div class="weight"><h5>10.81</h5></div>
</div>
</td>
<!-- I edited out the rest because it went 2000 characters ABOVE the limit...
but it should supply the general idea. -->
</tr>
</table>
</div>
<div class="dialog" title="Element Info:">
<p>Content</p>
</div>
<script>
$(document).ready(function() {
var blue = $(".dialog");
blue.dialog(
{
width: 400,
height: 500,
autoOpen: false,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(".dialog").hide();
$(".element").click(function(){
$(".dialog").dialog("open");
});
});
</script>
</body>
</html>