如何防止 Jquery 对话框离开页面？

Question

我正在尝试制作一款让用户玩棋盘游戏的游戏。他们点击板上的方块，然后打开对话框帮助他们做出选择。出于某种原因，对话框离开页面并且大部分不可见。到目前为止，我已经尝试使用 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');">&times;</span>
    </div>
    <br>
    <input type="radio" id="librarian" name="profession" value="lib" onclick="select('profession', 'Librarian', 4850, true);">
    <label for="librarian">Librarian: ,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: ,800/month</label><br>
    <input type="radio" id="actor" name="profession" value="act">
    <label for="actor" onclick="select('profession', 'Actor', 3100, true)">Actor: ,100/month</label><br>
    <input type="radio" id="teacher" name="profession" value="tea">
    <label for="teacher" onclick="select('profession', 'Teacher', 4500, true)">Teacher: ,500/month</label><br>
    <input type="radio" id="doctor" name="profession" value="doc">
    <label for="doctor" onclick="select('profession', 'Doctor', 13000, true)">Doctor: ,000/month</label><br>
    <input type="radio" id="fire" name="profession" value="fi">
    <label for="fire" onclick="select('profession', 'Firefighter', 3700, true)">Firefighter: ,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: ,400/month</label><br>

    <div class="modal-footer">
      <h3>sample footer</h3>
    </div>
  </div>
</div>

Answer 1

美国相对位置模态 class 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: relative;  /* ********* USE RELATIVE POSITION *******  */
  z-index: 1;
  /* Sit on top */
  padding-top: 0px;    /* ********* USE 0px FOR PADDING TOP *******  */
  left: 0;
  top: 0;
  width: 100%;        /* ********* USE AUTO *******  */
  /* Full width */
  height: auto;       /* ********* USE AUTO *******  */
  /* 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: 0% auto;        /* ********* USE 0% MARGIN *******  */
  /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: auto;
  /* 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');">&times;</span>
    </div>
    <br>
    <input type="radio" id="librarian" name="profession" value="lib" onclick="select('profession', 'Librarian', 4850, true);">
    <label for="librarian">Librarian: ,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: ,800/month</label><br>
    <input type="radio" id="actor" name="profession" value="act">
    <label for="actor" onclick="select('profession', 'Actor', 3100, true)">Actor: ,100/month</label><br>
    <input type="radio" id="teacher" name="profession" value="tea">
    <label for="teacher" onclick="select('profession', 'Teacher', 4500, true)">Teacher: ,500/month</label><br>
    <input type="radio" id="doctor" name="profession" value="doc">
    <label for="doctor" onclick="select('profession', 'Doctor', 13000, true)">Doctor: ,000/month</label><br>
    <input type="radio" id="fire" name="profession" value="fi">
    <label for="fire" onclick="select('profession', 'Firefighter', 3700, true)">Firefighter: ,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: ,400/month</label><br>

    <div class="modal-footer">
      <h3>sample footer</h3>
    </div>
  </div>
</div>

如何防止 Jquery 对话框离开页面？

How can I prevent a Jquery dialog from going off the page?

javascript

html

jquery

css

jquery-ui