【发布时间】：2021-09-26 04:57:50
【问题描述】：
我正在尝试制作一款用户玩棋盘游戏的游戏。他们单击板上的方块，然后打开对话框以帮助他们做出选择。出于某种原因，对话框正在离开页面，并且大部分内容不可见。到目前为止，我已经尝试使用 CSS 编辑框，但它不起作用。
有人对我如何解决这个问题有任何建议吗？
另外，我花了很多时间试图修复关闭按钮，但它们不起作用。如果您对此也有任何指导，将不胜感激！
function popup(category) {
$(category).dialog()
};
function select(category, choice, price, earn) {
if (earn) {
text = "earn"
} else {
text = "cost"
};
alert("Are you sure you want to choose " + choice + "?");
data.push([category, choice, price, earn]);
};
var data = [];#board {
border: 1px solid black;
background-color: forestgreen;
height: 375px;
width: 889px;
}
.square {
border: 1px solid black;
background-color: deepskyblue;
height: 125px;
width: 125px;
padding: 10px;
font-family: "Trebuchet MS";
float: left;
font-size: 20px;
}
.empty {
background-color: forestgreen;
height: 125px;
width: 125px;
padding: 10px;
float: left;
}
.modal {
display: none;
position: fixed;
z-index: 1;
/* Sit on top */
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
font-family: "Trebuchet MS";
font-size: 20px;
}
.modal-header {
padding: 2px 16px;
background-color: forestgreen;
color: black;
}
.modal-footer {
padding: 2px 16px;
background-color: forestgreen;
color: black;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
h1 {
text-align: center;
}<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="board">
<tr>
<td class="square" id="profession" onclick="popup('#professionSelect');">Start! Choose a Profession!<strong>→</strong></td>
<td class="square" id="home" onclick="popup('#homeSelect');">Choose a Home and Pay the Expense!</td>
<td class="square" id="transport">How Will You Get Around?</td>
<td class="square" id="unexpected1">$</td>
<td class="square" id="invest1">Invest in a Retirement Fund!</td>
<td class="square" id="wheel1">WHEEL OF FORTUNE!!!</td>
</tr>
<tr>
<td class="square" id="unexpected2">$</td>
</tr>
<tr>
<td class="square">hi</td>
</tr>
</table>
<div class="modal" id="professionSelect">
<div class="modal-content">
<div class="modal-header">
<h1>Choose a Profession!</h1>
<span class="close" "onclick=close('#professionSelect');">×</span>
</div>
<br>
<input type="radio" id="librarian" name="profession" value="lib" onclick="select('profession', 'Librarian', 4850, true);">
<label for="librarian">Librarian: $4,850/month</label><br>
<input type="radio" id="mechanic" name="profession" value="mech">
<label for="mechanic" onclick="select('profession', 'Motorcycle Mechanic', 2800, true)">Motorcycle Mechanic: $2,800/month</label><br>
<input type="radio" id="actor" name="profession" value="act">
<label for="actor" onclick="select('profession', 'Actor', 3100, true)">Actor: $3,100/month</label><br>
<input type="radio" id="teacher" name="profession" value="tea">
<label for="teacher" onclick="select('profession', 'Teacher', 4500, true)">Teacher: $4,500/month</label><br>
<input type="radio" id="doctor" name="profession" value="doc">
<label for="doctor" onclick="select('profession', 'Doctor', 13000, true)">Doctor: $13,000/month</label><br>
<input type="radio" id="fire" name="profession" value="fi">
<label for="fire" onclick="select('profession', 'Firefighter', 3700, true)">Firefighter: $3,700/month</label><br>
<input type="radio" id="engineer" name="profession" value="engi">
<label for="engineer" onclick="select('profession', 'Computer Engineer', 9400, true)">Computer Engineer: $9,400/month</label><br>
<div class="modal-footer">
<h3>sample footer</h3>
</div>
</div>
</div>【问题讨论】：
标签： javascript html jquery css jquery-ui