2009-12-03 27 views
7

どうすればいいですか?jQuery/JavaScriptで確認メッセージを作成する最も簡単な方法は?

  1. ユーザーが削除リンク(クラス「確認」)をクリックします。
  2. 「本当ですか?」と確認するメッセージが表示されます。 「はい」と「キャンセル」オプションを使用します。

「はい」を選択すると、リンクはクリックされたままになりますが、キャンセルが選択されていると、アクションはキャンセルされます。

更新:this guyからconfirm()おかげで最終作業コード:

$('.confirm').click(function() { 
    return confirm("Are you sure you want to delete this?"); 
}); 
+0

あなたは$(ドキュメント).ready(){}に入れたのですか? – helloandre

+0

はい、それは私の書類に用意されています。 – Andrew

答えて

17

Javascriptの組み込みの確認ダイアログを提供します。

if (confirm("Are you sure?")) 
{ 
    // continue with delete 
} 
+0

OKとキャンセルのオプションが表示されます。 –

+0

は簡単にそれを打つことはできません。 – nickf

+0

最も簡単な答えは、通常は正しいものです。 – AntonioCS

0

私はJqueryで確認ボックスを正常に実装しました。 (jquery-ui-1.8.16.custom.css、jquery-1.6.2.js、jquery-ui-1.8.16.custom.min)を試す前に、コードにJqueryライブラリとcssが含まれていることを確認してください。 js)。 JAVASCRIPT確認ボックスとこのBOXの主な相違点は、DIVを使用して作成したものですか?JAVASCRIPTの確認はユーザー入力後に行われます。次の行は実行されません。ここでYESを実行する必要があります。 NO BLOCK - 私のEXPEで** showConfirm AFTERコードの次の行が()すぐ*を実行しませんので注意してください

/** add this div to your html 

*/

var $confirm; 
var callBack; 
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>'; 
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">'; 
var messageStyleEnd = '</span>'; 


$(document).ready(function(){ 
    $('#confirmDialog').dialog({ 
      autoOpen: false, 
      modal: true 
    }); 


    //jquery confirm box -- the general alert box 
    $confirm = $('<div style="vertical-align:middle;"></div>') 
    .html('This Message will be replaced!') 
    .dialog({ 
     autoOpen: false, 
     modal: true, 
     position: 'top', 
     height:300, 
     width: 460, 
     modal: true, 
     buttons: { 
      Ok : function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.success(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.fail(); 
      } 
     } 
    }); 

}); 

    function showConfirm(message,callBackMe,title){ 
    callBack = null; 
    $confirm.html(""); // work around 
    $confirm.html(iconStyle + messageStyleStart +message + messageStyleEnd); 
    if(title =='undefined'|| null ==title) 
     $confirm.dialog("option", "title", "Please confirm"); 
    else 
     $confirm.dialog("option", "title", title); 
    var val = $confirm.dialog('open'); 
    callBack = callBackMe; 
    // prevent the default action 
    return true; 
} 

    // Now for calling the function 
// create a Javascript/jSOn callback object 

var callMeBack = { 
        success: function() 
          { // call your yes function here         
           clickedYes(); 
           return; 
          }, 
        fail: function(){ 
           // call your 'no' function here 
           clickedNo(); 
           return ; 
          } 
       }; 


    showConfirm("Do you want to Exit ?<br/>"+ 
        ,callMeBack1,"Please Answer"); 
1

これは最高の、最も簡単な方法です。

<a href="#" onclick="return myconfirm()">Confirm</a> 
<script> 
function myconfirm() 
{ 
    if(confirm('Are You Sure ...')) 
     return true; 
    return false; 
} 
</script> 
+1

より簡単な方法は、確認関数の戻り値を使うことです: 'onclick =" return confirm( 'Are you sure?') '' – Andrew

関連する問題