1

カスタマイズされたデザインと動的メッセージを含むJavaScript確認ボックスが必要です。

私の問題は次のとおりです。その呼び出しで呼び出す関数が必要です。そのポップアップの結果を受け取るにはどうすればよいですか。（はいまたはいいえのように）。それは可能ですか？

コード

if (confirm('Are you sure?')){
    //Do the process
}
else{ 
    //Show Error 
}

カスタムスタイルで確認を上書きしたい

4

3 に答える 3

3

ユーザーが応答できるようにする非表示のdivを作成するのはどうですか

    <div id="confirm" class="noshow">
      <div  id="messageContent" class="message"></div>
      <div id="okButton" onClick="doConfirm(true)" class="button"></div>
      <div id="cancelButton" onClick="doConfirm(false)" class="button"></div>
    </div>

これで、メッセージを簡単に設定できるようになりました。同様に、 andアクションをand関数でgetElementById('messageContent')処理できるようになりました。okcanceldoConfirm(true)doConfirm(false)

簡単に言えば、JavaScriptは次のようになります

doConfirm(flag){
  return flag;
 }

のようなCSSを持っています

.noshow{display:none;}

これで、実行時にjavascriptからhtmlを作成し、イベントハンドラーをアタッチできますが、これは私が考えることができる最も単純な方法です。

于 2013-03-10T11:59:27.567 に答える
2

私にとって、このソリューションははるかに優れています：

html：

<div id='modal_dialog'>
        <div class='title'></div>
        <input type='button' value='yes' id='btnYes' />
        <input type='button' value='no' id='btnNo' />
</div>

js：

function dialog(message, yesCallback, noCallback) {
    $('.title').html(message);
    var dialog = $('#modal_dialog').dialog();

    $('#btnYes').click(function() {
        dialog.dialog('close');
        yesCallback();
    });

    $('#btnNo').click(function() {
        dialog.dialog('close');
        noCallback();
    });
}

使用する：

    dialog('Are you sure you want to do this?',
        function() {
            //If yes do something
            console.log("yes");
        },
        function() {
            //If no do something else
            console.log("no");
        }
    );

追加しなかった場合は、jqueryを追加することを忘れないでください。

この質問に対するalnorth29の回答に基づく

于 2017-01-28T16:27:24.327 に答える
1

これを行うためにコールバックを使用できます

グローバルjavascriptファイルに追加されるハンドラーを確認します

function ConfirmInDiv(message, okcallback, cancelcallback) {
  $('#confirmation-holder').show();
  $("#confirmation_message").text(message);
  $('#Confirmation_Ok').unbind('click');
  $('#Confirmation_Ok').click(okcallback);
  $('#Confirmation_Cancel').unbind('click');
  $('#Confirmation_Cancel').click(cancelcallback);
}

function HideConfirmDiv() {
  $('#confirmation-holder').hide();
}

HTMLは、レイアウトファイルに存在する必要があります。

<div id="confirmation-holder" style="display:none">
    <div id="confirmation_message"></div>
    <a id="Confirmation_Ok" href="#" class="button">OK</a>
    <a id="Confirmation_Cancel" href="#" class="button light-button">Cancel</a>
</div>

そして、JavaScriptを呼び出したい場合は、次のことを確認してください。

これの代わりに

function delete()
{
     if(confirm("Delete?")
     {
         console.log('deleted');
     }
     else
     {
         console.log('delete cancelled');
     }
}

これを行う

function delete()
{
    function ok()
    {
         console.log('deleted');
         HideConfirmDiv();
    }
    function cancel()
    {
         console.log('delete cancelled');
         HideConfirmDiv();
    }
    ConfirmInDiv('Delete?', ok, cancel);   
}
于 2015-06-15T10:11:21.130 に答える