2012-02-01 4 views
23

は、私にはJavaScriptを通じて確認警告ボックスを表示していますMS Wordで示したよう」キャンセル:確認画面が表示されている「はい」「いいえ」と「それは

function checked() { 
if (hdnval.toLowerCase() != textbox1.toLowerCase()) { 
    var save = window.confirm('valid') 
    if (save == true) 
    { 
    return true; 
    } 
    else 
    { 
     return false; 
    } 
} 
} 

OKとCancelの2つのボタンがあります。

確認アラートに3番目のボタンを表示します。私は3つのボタンをこのようにしたい: 'はい' 'いいえ' 'キャンセル'、それはMS Wordで示すように。

+0

ここには多くのオプションがありませんか。また、「いいえ」は「キャンセル」とどのように違うのでしょうか? –

+1

@ BrianDriscoll:OPはおそらく "いいえ"のカスタムロジックを定義したいと考えています。たとえば、ユーザーが「閉じる」をクリックすると、ダイアログに「退室する前に作業を保存しますか?」というメッセージが表示されます。はい:保存して閉じる、いいえ:保存しないで閉じる、キャンセル:作業を開いたままにします。 – StriplingWarrior

+0

@Brian Driscoll:StriplingWarriorが正しい、Yesは保存する、Noは保存しない、他のタブに移動する、キャンセルすることはできませんが、同じページに留まる – Rocky

答えて

37

これはネイティブのjavascriptダイアログボックスでは実行できませんが、多くのjavascriptライブラリにはより柔軟なダイアログが含まれています。これにはjQuery UI's dialogのようなものを使用できます。

も参照してくださいこれらの非常によく似た質問:

はここthis jsFiddleで示したように、例を示します

<html><head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css"> 
</head> 
<body> 
    <a class="checked" href="http://www.google.com">Click here</a> 
    <script type="text/javascript"> 

     $(function() { 
      $('.checked').click(function(e) { 
       e.preventDefault(); 
       var dialog = $('<p>Are you sure?</p>').dialog({ 
        buttons: { 
         "Yes": function() {alert('you chose yes');}, 
         "No": function() {alert('you chose no');}, 
         "Cancel": function() { 
          alert('you chose cancel'); 
          dialog.dialog('close'); 
         } 
        } 
       }); 
      }); 
     }); 

    </script> 
</body><html> 
+0

あなたはjqueryで知識を持っていないので、いくつかのデモを解説してください。 – Rocky

+0

@Rocky:時間を見つけたら、コードサンプルを提供するかもしれませんが、jQueryとjQuery UIダイアログボックスのドキュメントはかなり明確です。リンク先のデモページのソースコードを確認してください。チュートリアルを見つけるためにGoogleを使用してください。私は、私の仕事で数分の仕事があなたに数時間の労力を節約するのに役立つのが好きですが、私はあなたのためにすべての仕事をするつもりはありません。 – StriplingWarrior

+0

@ StriplingWarrior:ヘルプとサンプルコードを少し用意するだけで十分です。私はいくつかのアイデアを得ることができれば休んでいます。 – Rocky

16

したくない場合別のJSライブラリを使用する2つのconfirmダイアログを使用してチェックを行うことができます:

if (confirm("Are you sure you want to quit?")) { 
    if (confirm("Save your work before leaving?")) { 
     // code here for save then leave (Yes) 
    } else { 
     //code here for no save but leave (No) 
    } 
} else { 
    //code here for don't leave (Cancel) 
} 
+2

3つのボタンをすべて一度に表示したい – Rocky

関連する問題