如何防止Jquery對話框脫離頁面？ -有解無憂

我正在嘗試制作一個游戲，用戶在其中玩一個棋盤游戲。他們點擊棋盤上的方塊，然后打開對話框以幫助他們做出選擇。由于某些原因，對話框離開了頁面，大部分內容都不可見。到目前為止，我已經嘗試用CSS來編輯這個對話框，但它沒有發揮作用。

誰能給我一些建議，告訴我如何解決這個問題？

另外，我花了很多時間試圖修復關閉按鈕，但它們并不作業。

。

function popup(category) {
  $(category).dialog()
};

function select（category, choice, price, earn） {
  if (earn) {
    text = "ear"/span>
  } else {
    text = "cost" }; 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%;
  /* 全幅 */; /* 全幅
  height: 100%;
  /* 全高 */
  overflow: auto;
  /* 必要時啟用滾動 */
  background-color: rgb（0, 0, 0）。
  /* 后退顏色 */
  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%;
  /* 可以更多或更少，取決于螢屏大小 */; /* 可以更多或更少。
  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">/span>
  <tr>/span>
    < td class="square" id="profession" onclick="popup（'#professionSelect'）。 ">開始! 選擇一個職業! <strong>→< /strong></td>>
    < td class="square" id="home" onclick="popup（'#homeSelect'）。 ">選擇房屋并支付費用! </td>選擇房屋并支付費用!
    <td class="square" id="transport">> 你將如何出行？ </td>你將如何出行？
    <td class="square" id=" unexpected1" > $</td>
    <td class="square"/span> id="invest1"/span>> 投資于退休基金! </td>投資退休基金!
    < td class="square" id="wheel1">/span>WHEEL OF FORTUNE! !!</td>財富之輪!
  </tr>/span>
  <tr>/span>
    <td class="square" id=" unexpected2" > $</td>
  </tr>
  <tr>/span>
    <td class=" square"> 
  </tr>/span>
</table>/span>

< div class="modal" id="professionSelect"> 
  <div class="modal-content"/span>>
    <div class="modal-header">/span>
      <h1>選擇一個專業！</h1>
      < span class="close"/span> "onclick=close('#professionSelect') 。 ">&times;</span> 
    </div>/span>
    <br>/span>
    < input type="radio" id="librarian" name="profession" value="lib" onclick="select（'profession', 'Librarian', 4850, true)。 ">
    <label for="librarian">/span>圖書管理員。4,850美元/月</label><br>/span>
    < input type="radio" id="mechanic" name="profession" value="mech"> 
    < label for="mechanic" onclick="select（'profession', 'Motorcycle Mechanic', 2800, true）"> 摩托車技師。2800美元/月</label><br>/span>
    < input type="radio" id="actor" name="profession" value="act"> 
    < label for="actor" onclick="select（'profession', 'Actor', 3100, true）"> 演員。3,100美元/月</label><br>/span>
    < input type="radio" id="teacher" name="profession" value="teach"> 
    < label for="teacher" onclick="select('profession', 'teacher', 4500, true)"> 教師。4,500美元/月</label><br>/span>
    < input type="radio" id="doctor" name="profession" value="doc"> 
    < label for="doctor" onclick="select（'profession', 'Doctor', 13000, true）"> 醫生。13000美元/月</label><br>/span>
    < input type="radio"/span> id="fire" name="profession" value="fi"> 
    < label for="fire" onclick="select（'profession', 'Firefighter', 3700, true）"> 消防員。3,700美元/月</label><br>/span>
    < input type="radio" id="工程師" name="profession" value="engi"> 
    < label for="engineer" onclick="select（'profession', 'Computer Engineer', 9400, true）"> 計算機工程師。9400美元/月</label><br>/span>

    <div class="modal-footer"/span>>
      <h3>示例頁腳</h3> 
    </div>/span>
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

US RELATIVE POSITION modal class css.

。

function popup(category) {
  $(category).dialog()
};

function select（category, choice, price, earn） {
  if (earn) {
    text = "ear"/span>
  } else {
    text = "cost" }; 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;
  /* 坐在上面 */
  padding-top: 0px; /* ********* use 0px for PADDING TOP ******* */
  left: 0;
  top: 0;
  width: 100%; /* ********* USE AUTO ******* */
  /* 全幅 */; /* 全幅 */.
  height: auto; /* ********* USE AUTO ******* */
  /* 全高 */
  overflow: auto;    
  /* 必要時啟用滾動功能 */
  background-color: rgb（0, 0, 0）。
  /* 后退顏色 */
  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;
  /* 可多可少，取決于螢屏尺寸*/。
  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">/span>
  <tr>/span>
    < td class="square" id="profession" onclick="popup（'#professionSelect'）。 ">開始! 選擇一個職業! <strong>→< /strong></td>>
    < td class="square" id="home" onclick="popup（'#homeSelect'）。 ">選擇房屋并支付費用! </td>選擇房屋并支付費用!
    <td class="square" id="transport">> 你將如何出行？ </td>你將如何出行？
    <td class="square" id=" unexpected1" > $</td>
    <td class="square"/span> id="invest1"/span>> 投資于退休基金! </td>投資退休基金!
    < td class="square" id="wheel1">/span>WHEEL OF FORTUNE! !!</td>財富之輪!
  </tr>/span>
  <tr>/span>
    <td class="square" id=" unexpected2" > $</td>
  </tr>
  <tr>/span>
    <td class=" square"> 
  </tr>/span>
</table>/span>

< div class="modal" id="professionSelect"> 
  <div class="modal-content"/span>>
    <div class="modal-header">/span>
      <h1>選擇一個專業！</h1>
      < span class="close"/span> "onclick=close('#professionSelect') 。 ">&times;</span> 
    </div>/span>
    <br>/span>
    < input type="radio" id="librarian" name="profession" value="lib" onclick="select（'profession', 'Librarian', 4850, true)。 ">
    <label for="librarian">/span>圖書管理員。4,850美元/月</label><br>/span>
    < input type="radio" id="mechanic" name="profession" value="mech"> 
    < label for="mechanic" onclick="select（'profession', 'Motorcycle Mechanic', 2800, true）"> 摩托車技師。2800美元/月</label><br>/span>
    < input type="radio" id="actor" name="profession" value="act"> 
    < label for="actor" onclick="select（'profession', 'Actor', 3100, true）"> 演員。3,100美元/月</label><br>/span>
    < input type="radio" id="teacher" name="profession" value="teach"> 
    < label for="teacher" onclick="select('profession', 'teacher', 4500, true)"> 教師。4,500美元/月</label><br>/span>
    < input type="radio" id="doctor" name="profession" value="doc"> 
    < label for="doctor" onclick="select（'profession', 'Doctor', 13000, true）"> 醫生。13000美元/月</label><br>/span>
    < input type="radio"/span> id="fire" name="profession" value="fi"> 
    < label for="fire" onclick="select（'profession', 'Firefighter', 3700, true）"> 消防員。3,700美元/月</label><br>/span>
    < input type="radio" id="工程師" name="profession" value="engi"> 
    < label for="engineer" onclick="select（'profession', 'Computer Engineer', 9400, true）"> 計算機工程師。9400美元/月</label><br>/span>

    <div class="modal-footer"/span>>
      <h3>示例頁腳</h3> 
    </div>/span>
  </div>/span>
</div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/319921.html

標籤：

上一篇：JQueryUI范圍滑塊價值

下一篇：在Jquery或Javascript中為附加的表單添加唯一的ID