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

Posted

技术标签:

【中文标题】如何防止 Jquery 对话框离开页面？【英文标题】：How can I prevent a Jquery dialog from going off the page? 【发布时间】：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');">&times;</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>

【问题讨论】：

【参考方案1】：

US RELATIVE POSITION 模态类 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: $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>

【讨论】：

非常感谢！我添加了那一点，并注意到我现在可以看到所有内容！但是，它看起来很长而且很瘦，而不是填充更多的页面宽度。你知道我该如何解决这个问题吗？

以上是关于如何防止 Jquery 对话框离开页面？的主要内容，如果未能解决你的问题，请参考以下文章

离开页面前的 Jquery 未保存更改警报

如何禁用 Firefox 中的“离开页面”确认对话框？

单击对话框内的asp按钮时，如何防止关闭jQuery模式对话框？

如何在不离开 php 页面的情况下强制保存另存为对话框？

在将按钮添加到 jQuery UI 对话框时，如何防止有人更改或避免我的 JavaScript 逻辑？

jQuery UI 对话框 OnBeforeUnload