使用Modal UI覆盖JS Alert(）消息

• 函数taken不存在，在这种情况下，代码在到达process之前就会出错。（我在下面的例子中添加了一个。）
• all始终为0，因此$(...).dialog()从不在process中激发。（你的逻辑有问题。）

我给你做了一个dialog0的例子，说明all总是0。请参阅下面的代码片段。

var x = "x.gif";
var o = "o.gif";
var blank = "blank-sq.gif";
var pause = 0;
var all = 0;
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
var f = 0;
var g = 0;
var h = 0;
var i = 0;
var temp = "";
var ok = 0;
var cf = 0;
var choice = 9;
var aRandomNumber = 0;
var comp = 0;
var t = 0;
var wn = 0;
var ls = 0;
var ts = 0;
function logicOne() {
  if ((a == 1) && (b == 1) && (c == 1)) all = 1;
  if ((a == 1) && (d == 1) && (g == 1)) all = 1;
  if ((a == 1) && (e == 1) && (i == 1)) all = 1;
  if ((b == 1) && (e == 1) && (h == 1)) all = 1;
  if ((d == 1) && (e == 1) && (f == 1)) all = 1;
  if ((g == 1) && (h == 1) && (i == 1)) all = 1;
  if ((c == 1) && (f == 1) && (i == 1)) all = 1;
  if ((g == 1) && (e == 1) && (c == 1)) all = 1;
  if ((a == 2) && (b == 2) && (c == 2)) all = 2;
  if ((a == 2) && (d == 2) && (g == 2)) all = 2;
  if ((a == 2) && (e == 2) && (i == 2)) all = 2;
  if ((b == 2) && (e == 2) && (h == 2)) all = 2;
  if ((d == 2) && (e == 2) && (f == 2)) all = 2;
  if ((g == 2) && (h == 2) && (i == 2)) all = 2;
  if ((c == 2) && (f == 2) && (i == 2)) all = 2;
  if ((g == 2) && (e == 2) && (c == 2)) all = 2;
  if ((a != 0) && (b != 0) && (c != 0) && (d != 0) && (e != 0) && (f != 0) && (g != 0) && (h != 0) && (i != 0) && (all == 0)) all = 3;
}
function logicTwo() {
  if ((a == 2) && (b == 2) && (c == 0) && (temp == "")) temp = "C";
  if ((a == 2) && (b == 0) && (c == 2) && (temp == "")) temp = "B";
  if ((a == 0) && (b == 2) && (c == 2) && (temp == "")) temp = "A";
  if ((a == 2) && (d == 2) && (g == 0) && (temp == "")) temp = "G";
  if ((a == 2) && (d == 0) && (g == 2) && (temp == "")) temp = "D";
  if ((a == 0) && (d == 2) && (g == 2) && (temp == "")) temp = "A";
  if ((a == 2) && (e == 2) && (i == 0) && (temp == "")) temp = "I";
  if ((a == 2) && (e == 0) && (i == 2) && (temp == "")) temp = "E";
  if ((a == 0) && (e == 2) && (i == 2) && (temp == "")) temp = "A";
  if ((b == 2) && (e == 2) && (h == 0) && (temp == "")) temp = "H";
  if ((b == 2) && (e == 0) && (h == 2) && (temp == "")) temp = "E";
  if ((b == 0) && (e == 2) && (h == 2) && (temp == "")) temp = "B";
  if ((d == 2) && (e == 2) && (f == 0) && (temp == "")) temp = "F";
  if ((d == 2) && (e == 0) && (f == 2) && (temp == "")) temp = "E";
  if ((d == 0) && (e == 2) && (f == 2) && (temp == "")) temp = "D";
  if ((g == 2) && (h == 2) && (i == 0) && (temp == "")) temp = "I";
  if ((g == 2) && (h == 0) && (i == 2) && (temp == "")) temp = "H";
  if ((g == 0) && (h == 2) && (i == 2) && (temp == "")) temp = "G";
  if ((c == 2) && (f == 2) && (i == 0) && (temp == "")) temp = "I";
  if ((c == 2) && (f == 0) && (i == 2) && (temp == "")) temp = "F";
  if ((c == 0) && (f == 2) && (i == 2) && (temp == "")) temp = "C";
  if ((g == 2) && (e == 2) && (c == 0) && (temp == "")) temp = "C";
  if ((g == 2) && (e == 0) && (c == 2) && (temp == "")) temp = "E";
  if ((g == 0) && (e == 2) && (c == 2) && (temp == "")) temp = "G";
}
function logicThree() {
  if ((a == 1) && (b == 1) && (c == 0) && (temp == "")) temp = "C";
  if ((a == 1) && (b == 0) && (c == 1) && (temp == "")) temp = "B";
  if ((a == 0) && (b == 1) && (c == 1) && (temp == "")) temp = "A";
  if ((a == 1) && (d == 1) && (g == 0) && (temp == "")) temp = "G";
  if ((a == 1) && (d == 0) && (g == 1) && (temp == "")) temp = "D";
  if ((a == 0) && (d == 1) && (g == 1) && (temp == "")) temp = "A";
  if ((a == 1) && (e == 1) && (i == 0) && (temp == "")) temp = "I";
  if ((a == 1) && (e == 0) && (i == 1) && (temp == "")) temp = "E";
  if ((a == 0) && (e == 1) && (i == 1) && (temp == "")) temp = "A";
  if ((b == 1) && (e == 1) && (h == 0) && (temp == "")) temp = "H";
  if ((b == 1) && (e == 0) && (h == 1) && (temp == "")) temp = "E";
  if ((b == 0) && (e == 1) && (h == 1) && (temp == "")) temp = "B";
  if ((d == 1) && (e == 1) && (f == 0) && (temp == "")) temp = "F";
  if ((d == 1) && (e == 0) && (f == 1) && (temp == "")) temp = "E";
  if ((d == 0) && (e == 1) && (f == 1) && (temp == "")) temp = "D";
  if ((g == 1) && (h == 1) && (i == 0) && (temp == "")) temp = "I";
  if ((g == 1) && (h == 0) && (i == 1) && (temp == "")) temp = "H";
  if ((g == 0) && (h == 1) && (i == 1) && (temp == "")) temp = "G";
  if ((c == 1) && (f == 1) && (i == 0) && (temp == "")) temp = "I";
  if ((c == 1) && (f == 0) && (i == 1) && (temp == "")) temp = "F";
  if ((c == 0) && (f == 1) && (i == 1) && (temp == "")) temp = "C";
  if ((g == 1) && (e == 1) && (c == 0) && (temp == "")) temp = "C";
  if ((g == 1) && (e == 0) && (c == 1) && (temp == "")) temp = "E";
  if ((g == 0) && (e == 1) && (c == 1) && (temp == "")) temp = "G";
}
function clearOut() {
  document.game.you.value = "0";
  document.game.computer.value = "0";
  document.game.ties.value = "0";
}
function checkSpace() {
  if ((temp == "A") && (a == 0)) {
    ok = 1;
    if (cf == 0) a = 1;
    if (cf == 1) a = 2;
  }
  if ((temp == "B") && (b == 0)) {
    ok = 1;
    if (cf == 0) b = 1;
    if (cf == 1) b = 2;
  }
  if ((temp == "C") && (c == 0)) {
    ok = 1;
    if (cf == 0) c = 1;
    if (cf == 1) c = 2;
  }
  if ((temp == "D") && (d == 0)) {
    ok = 1;
    if (cf == 0) d = 1;
    if (cf == 1) d = 2;
  }
  if ((temp == "E") && (e == 0)) {
    ok = 1;
    if (cf == 0) e = 1;
    if (cf == 1) e = 2;
  }
  if ((temp == "F") && (f == 0)) {
    ok = 1
    if (cf == 0) f = 1;
    if (cf == 1) f = 2;
  }
  if ((temp == "G") && (g == 0)) {
    ok = 1
    if (cf == 0) g = 1;
    if (cf == 1) g = 2;
  }
  if ((temp == "H") && (h == 0)) {
    ok = 1;
    if (cf == 0) h = 1;
    if (cf == 1) h = 2;
  }
  if ((temp == "I") && (i == 0)) {
    ok = 1;
    if (cf == 0) i = 1;
    if (cf == 1) i = 2;
  }
}
function yourChoice(chName) {
  pause = 0;
  if (all != 0) ended();
  if (all == 0) {
    cf = 0;
    ok = 0;
    temp = chName;
    checkSpace();
    if (ok == 1) {
      document.images[chName].src = x;
    }
    if (ok == 0) taken();  // <--- this function does not exist
    process();
    if ((all == 0) && (pause == 0)) myChoice();
  }
}
function taken() { } // <--- inserted this here just for testing
function myChoice() {
  temp = "";
  ok = 0;
  cf = 1;
  logicTwo();
  logicThree();
  checkSpace();
  while (ok == 0) {
    aRandomNumber = Math.random()
    comp = Math.round((choice - 1) * aRandomNumber) + 1;
    if (comp == 1) temp = "A";
    if (comp == 2) temp = "B";
    if (comp == 3) temp = "C";
    if (comp == 4) temp = "D";
    if (comp == 5) temp = "E";
    if (comp == 6) temp = "F";
    if (comp == 7) temp = "G";
    if (comp == 8) temp = "H";
    if (comp == 9) temp = "I";
    checkSpace();
  }
  document.images[temp].src = o;
  process();
}
function process() {
  logicOne();
  if (all === 0) { // <----- all is always 0.
    $("#dialog0").dialog();
  }
  else if (all == 1) {           
    $("#dialog1").dialog(); //<-----------------
  }
  else if (all == 2) {
    $("#dialog2").dialog(); //<-----------------
  }
  else if (all == 3) {
    $("#dialog3").dialog(); //<-----------------
  }
}
function playAgain() {
  if (all == 0) {
    reset();
  }
  if (all > 0) reset();
}
function reset() {
  all = 0;
  a = 0;
  b = 0;
  c = 0;
  d = 0;
  e = 0;
  f = 0;
  g = 0;
  h = 0;
  i = 0;
  temp = "";
  ok = 0;
  cf = 0;
  choice = 9;
  aRandomNumber = 0;
  comp = 0;
  document.images.A.src = blank;
  document.images.B.src = blank;
  document.images.C.src = blank;
  document.images.D.src = blank;
  document.images.E.src = blank;
  document.images.F.src = blank;
  document.images.G.src = blank;
  document.images.H.src = blank;
  document.images.I.src = blank;
  if (t == 0) {
    t = 2;
    myChoice();
  }
  t--;
}

.center {
  margin: auto;
}
body {
  background-color: #000000;
}
.button {
  margin: auto;
  width: 102px;
  height: 95px;
}
.center button {
  background-color: #000000;
  border: none;
}
#board-outer {
  background-color: none;
  overflow: hidden;
}
#board {
  width: 750px;
  height: 750px;
  background-color: none;
  border-spacing: 0;
  margin: auto;
}
td {
  height: 246px;
  width: 246px;
  text-align: center;
  border-collapse: collapse;
  border: 7px solid #000000;
  background-color: #333333;
}
a,
.title {
  color: #b24926;
}
#content a:hover {
  color: #333;
}
#banner-secondary p.intro {
  padding: 0;
  float: left;
  width: 50%;
}
#banner-secondary .download-box {
  border: 1px solid #aaa;
  background: #333;
  background: -webkit-linear-gradient(left, #333 0%, #444 100%);
  background: linear-gradient(to right, #333 0%, #444 100%);
  float: right;
  width: 40%;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}
#banner-secondary .download-box h2 {
  color: #71d1ff;
  font-size: 26px;
}
#banner-secondary .download-box .button {
  float: none;
  display: block;
  margin-top: 15px;
}
#banner-secondary .download-box p {
  margin: 15px 0 5px;
}
#banner-secondary .download-option {
  width: 45%;
  float: left;
  font-size: 16px;
}
#banner-secondary .download-legacy {
  float: right;
}
#banner-secondary .download-option span {
  display: block;
  font-size: 14px;
  color: #71d1ff;
}
#content .dev-links {
  float: right;
  width: 30%;
  margin: -15px -25px .5em 1em;
  padding: 1em;
  border: 1px solid #666;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 5px;
  box-shadow: -2px 2px 10px -2px #666;
}
#content .dev-links ul {
  margin: 0;
}
#content .dev-links li {
  padding: 0;
  margin: .25em 0 .25em 1em;
  background-image: none;
}
.demo-list {
  float: right;
  width: 25%;
}
.demo-list h2 {
  font-weight: normal;
  margin-bottom: 0;
}
#content .demo-list ul {
  width: 100%;
  border-top: 1px solid #ccc;
  margin: 0;
}
#content .demo-list li {
  border-bottom: 1px solid #ccc;
  margin: 0;
  padding: 0;
  background: #eee;
}
#content .demo-list .active {
  background: #fff;
}
#content .demo-list a {
  text-decoration: none;
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: #3f3f3f;
  text-shadow: 1px 1px #fff;
  padding: 2% 4%;
}
.demo-frame {
  width: 70%;
  height: 350px;
}
.view-source a {
  cursor: pointer;
}
.view-source > div {
  overflow: hidden;
  display: none;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="board-outer" class="center">
  <table id="board">
    <tr class="row">
      <td>
        <a href="javascript:yourChoice('A')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="A" alt="Top-Left">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('B')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="B" alt="Top-Center">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('C')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="C" alt="Top-Right">
        </a>
      </td>
    </tr>
    <tr class="row">
      <td>
        <a href="javascript:yourChoice('D')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="D" alt="Middle-Left">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('E')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="E" alt="Middle-Center">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('F')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="F" alt="Middle-Right">
        </a>
      </td>
    </tr>
    <tr class="row">
      <td>
        <a href="javascript:yourChoice('G')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="G" alt="Bottom-Left">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('H')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="H" alt="Bottom-Center">
        </a>
      </td>
      <td>
        <a href="javascript:yourChoice('I')">
          <img src="blank-sq.gif" border="0" height="246" width="246" name="I" alt="Bottom-Right">
        </a>
      </td>
    </tr>
  </table>
</div>
<br>
<div class="center button">
  <button onClick="playAgain();">
    <img src="restart.gif" width="111" height="98" border="0">
  </button>
</div>
<div id="dialog0" title="Basic dialog">
  <p>All is 0.</p>
</div>
<div id="dialog1" title="Basic dialog">
  <p>You won!</p>
</div>
<div id="dialog2" title="Basic dialog">
  <p>Computer wins!</p>
</div>
<div id="dialog3" title="Basic dialog">
  <p>Tied!</p>
</div>