Modal UIを使用したJS Alert（）メッセージのオーバーライド

-2

SweetAlert2が機能していないことを知り、jQueryを統合してAlert（）をオーバーライドしようとしました。それはdoesntの仕事らしい -Modal UIを使用したJS Alert（）メッセージのオーバーライド

HTML

<html> 
<script src="action.js"></script> 
<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> 

<body> 
<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="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> 
</body>

CSS

<style> 
.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;} 
</style>

Javascriptを

// VARIABLES 
<!-- 
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(); 
    process(); 
if ((all==0)&&(pause==0)) myChoice(); 
    } 
} 

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==1) 
    { 
     $("#dialog1").dialog(); <----------------- 
     } 
if (all==2) 
    { 
     $("#dialog2").dialog(); <----------------- 
     } 
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--; 
} 

// -->

出典

2016-05-02 Christian Luneborg

あり、このような[ブートストラップ]（http://getbootstrap.com）として、あなたのためにこれを行うライブラリがあるか[jQueryUI]（https://jqueryui.com） – Jasen

私は考えhttps://limonte.github.io/sweetalert2/をお勧めします。 – andreivictor

機能takenは、それが今までprocessを打つ前にコードが出てエラーと思われる場合には、存在しません。（私は以下の例で1つを追加しました）
allは常に0であるため、$(...).dialog()は決してprocessで発生しません。（何かがあなたのロジックでアップします。）

あなたはallは、以下のコードを参照してください常に0で表示するようにするために、私は例dialog0を作りました。

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>

出典

2016-05-03 15:51:06 notacouch

Modal UIを使用したJS Alert（）メッセージのオーバーライド

答えて

関連する問題