web-dev-qa-db-ja.com

JQueryを使用したモーダル確認ボックスは可能ですか？

かなり見て回ったが、JQueryソリューションを見つけることができないようです（おそらくJavaScriptの制限）：

<a href="somelink.php" 
   onclick="return confirm('Go to somelink.php?');">Click Here</a>

上記の例では、ユーザーがリンクをクリックすると、ユーザーが確認ボックスで[OK]をクリックした場合にのみ、hrefに移動します。

私がやろうとしているのは、ポップアップdivを使用してよりモダンな外観にすることです。おそらくこのようなもの：

<a href="somelink.php" 
   onclick="return jq_confirm('Go to somelink.php?');">Click Here</a>

（ここでjq_confirmは、YES/NOまたはOK/CANCELボタンペアでNice divをポップアップするカスタムJQuery確認関数です）。

しかし、私はそのようなものを見つけることができないようです。

同様の機能を提供するいくつかのJQueryウィジェットライブラリなどを見てきましたが、上記のシナリオではなく、少なくともユーザーからの応答を待つものはありません（）、しかし、代わりに先に進み、ユーザーをリンクに誘導します（、またはリンクのhref = ''部分に埋め込まれたJavaScriptを実行します ）。これは、これらのウィジェットの多くにコールバック関数をアタッチしてtrue/false値を返すことができますが、onclickイベントは応答を待機しないためです（コールバックは非同期）であるため、確認ボックスの目的を無効にします。

必要なのは、デフォルトのconfirm（）コマンドが提供するのと同じ種類のhalt-all-javascript（モーダル）機能です。これはJQuery（またはJavaScript）でも可能ですか？

私はJavaScriptやJQueryの専門家ではないので、指導者の皆さんにはお任せください。すべてのJQuery（または純粋なJavaScript）ソリューションも歓迎です（可能であれば ）。

ありがとう-

javascriptjquerymodal-dialog
32
OneNerd

同じ問題を解決する必要がありました。 dialog ウィジェットを JQuery UI から使用しました。確認機能を使用するリンクのdialogイベントハンドラーでclickを部分的に初期化する必要があるという注意事項で、コールバックを使用せずにこれを実装できました（これを複数のリンクに使用します）。これは、リンクのターゲットURLを確認ボタンのクリックのイベントハンドラーに挿入する必要があるためです。

これが私の例で、例に適するように抽象化されています。 CSSクラスを使用して、確認動作が必要なリンクを示します。

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });




  }); // end of $(document).ready


</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
21
Paul Morie

チェックアウト http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/

JQueryにはさまざまなモーダルボックスがあります。

http://www.ericmmartin.com/simplemodal/ が表示されるはずです

JavaScript確認機能のモーダルダイアログオーバーライド。 onShowの使用方法と、デフォルトのJavaScript確認ダイアログの代わりにモーダルダイアログ確認を表示する方法を示します。

8
janhartmann

jQuery UIサイト で jQueryモーダルダイアログ を見ましたか？

7
Russ Cam

私はここでこの問題の解決策についてブログに書きました： http://markmintoff.com/2011/03/asp-net-jquery-confirm-dialog/

この記事はASP.Net向けですが、PHPに簡単に適合させることができます。これは、falseを返し、ユーザーが「OK」または「YES」またはwhat-have-youをクリックしたときにクリックを防止することに依存しています。リンクまたはボタンが再度クリックされるだけです。

var confirmed = false;
function confirmDialog(obj)
{
    if(!confirmed)
    {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Yes": function()
                {
                    $( this ).dialog( "close" );
                    confirmed = true; obj.click();
                },
                "No": function()
                {
                    $( this ).dialog( "close" );
                }
            }
        });
    }

    return confirmed;
}

試してみて、あなたの考えを教えてください。これで問題が解決することを願っています。

6
Mark Mintoff

この質問には正規の答えがないようですので、alertやconfirm doのようなJavaScriptの実行をプログラムで一時停止（および再開）する方法はありません。

とはいえ、今日のこの動作に依存することは、通常、javascriptのシングルスレッドの性質を考えると悪い習慣と見なされます。互換性を確保するために、後で変更しません。最近の焦点はできる限り多くの非ブロッキングjsコードを書くことにあるので、プログラムでjsを停止する機能がECMAScriptの将来の仕様に到達する可能性は低いため、確認して確認するためにサイトを作り直すことをお勧めします警告ダイアログは、バックグラウンドで実行されている他のJavaScriptコードと共存できます。

2
Mahn

次のコードを記述することで、標準のwindow.confirm関数をオーバーライドできるはずです。

window.confirm = modalConfirm

次に、このような関数を作成する必要があります

function modalConfirm(message){
  // put your code here and bind "return true/false" to the click event
  // of the "Yes/No" buttons.
}

これは動作するはずですが、まだテストしていません。私は今まさにこれを行うつもりであり、それがどのように機能したかを皆さんに知らせます。

編集：私は今、上記の例をテストしましたが、それは不可能でした。次のように、上書きされた確認関数にコールバック関数を渡す必要があります。

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

..関数の呼び出しは次のようになります。

confirm("Are you sure?", function(result){
  alert(result);
});

つまり、ブラウザをハングさせる厄介なループを引き起こすことなく、デフォルトのwindow.confirm関数を完全にオーバーライドすることはできません。上記のような確認呼び出しを変更する必要があると思います。

2
Torbjorn

この問題を回避する私の方法は、オブジェクトに任意のデータを追加し、クリック時にそのデータを確認することでした。存在する場合は通常どおり機能を続行し、存在しない場合はyes/noで確認します（私の場合はjqtoolsオーバーレイを使用）。ユーザーが[はい]をクリックした場合-オブジェクトにデータを挿入し、別のクリックをシミュレートしてデータをワイプします。 [いいえ]をクリックした場合、オーバーレイを閉じます。

これが私の例です：

$('button').click(function(){
    if ($(this).data('confirmed')) {
        // Do stuff
    } else {
        confirm($(this));
    }
});

そして、これは私が確認機能をオーバーライドするためにしたことです（jqueryツールオーバーレイを使用して）：

window.confirm = function(obj){
    $('#dialog').html('\
        <div>\
            <h2>Confirm</h2>\
            <p>Are you sure?</p>\
            <p>\
                <button name="confirm" value="yes" class="facebox-btn close">Yes</button>\
                <button name="confirm" value="no" class="facebox-btn close">No</button>\
            </p>\
        </div>').overlay().load();
    $('button[name=confirm]').click(function(){
        if ($(this).val() == 'yes') {
            $('#dialog').overlay().close();
            obj.data('confirmed', true).click().removeData('confirmed');
        } else {
            $('#dialog').overlay().close();
        }
    });
}
1
Steve

次のような関数内にリダイレクトを配置します。

<script>
    function confirmRedirect(url, desciption) {
       if (confirmWindow(desciption)) {
           window.location = url;
       }
    }
</script>

そして、次のように呼び出します：

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a>
1
Bogdan Gusiev

Banuのソリューションの上に構築して（1トンありがとう！）、各ページの上にワンポップソリューションにします。このコードを内部に貼り付けます：

$(document).ready

そして、確認したいすべてのリンクに「confirmLinkFollow」クラスを追加します。

$(".confirmLinkFollow").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");
var $dialog_link_follow_confirm = $('<div></div>').
        html("<p>Are you sure?</p>").
        dialog({autoOpen: false,
        title: 'Please Confirm',
        buttons : {
            "Confirm" : function() { 
                window.location.href = targetUrl; 
        },
        "Cancel" : function() { 
                $(this).dialog("close"); 
            }
        },

        modal: true,
    minWidth: 250,
    minHeight: 120
    }
    );


    $dialog_link_follow_confirm.dialog("open");
});
1
cii

デフォルトのwindow.confirm関数を置き換えるために使用できるソリューションがあります。 window.confirmをオーバーライドする必要はありません。これは完全には不可能です。

私のソリューションでは、私のような一般的なクラスを持つことができます。たとえば、処理前に確認が必要な要素に「confirm-action」を配置するとしましょう。このスクリプトは非常にシンプルで、jQuery、jQuery UIダイアログを使用し、他のプラグインは使用しません。

JsFiddleで実装の完全なデモを見つけることができます http://jsfiddle.net/74NDD/39/ 。

使用法：

  • このjavascriptコードをhtmlヘッドに追加するか、javascriptにある他のクリックバインディングの前に追加します。

    $("#dialog:ui-dialog").dialog("destroy");

$('.confirm-action').live('click', function(e) {
    $self = $(this);

    if (e && e.stopImmediatePropagation && $self.data('confirmed') !== true) {
        e.stopImmediatePropagation();

        $('#confirm-action-dialog').dialog({
            height: 110,
            modal: true,
            resizable: false,
            draggable: false,
            buttons: {
                'Yes': function() {
                    $(this).dialog('close');
                    $self.data('confirmed', true);
                    $self.click();
                },
                'No': function() {
                    $self.data('confirmed', false);
                    $(this).dialog('close');
                }
            }
        });
    } else if ($self.data('confirmed') === true) {
        e = window.event;
        e.cancelBubble = false;
        $self.data('confirmed', false);
    }

    return false;
});

  • このhtmlを本文のどこかに配置します（デフォルトでは非表示です）。

     <div style = "display：none;" id = "confirm-action-dialog" title = "Confirm Action？"> 
 <p> 
 <span class = "ui-icon ui-icon-alert"> </ span> 
続行してもよろしいですか？
 </ p> 
 </ div>

  • 確認が必要な要素にクラス「confirm-action」を配置します。

    確認アクション

このソリューションは、jQueryイベントのバブリングを変更せず、ユーザーが実行する操作を決定するまで他のすべてのイベントを一時停止（停止）するだけなので、完璧に機能します。

別のjQueryプラグインのインストールや他のハックを必要としない他のソリューションを見つけることができなかったので、これが他の人にとって役立つことを願っています。

1
Jamalah Bryan

ほぼ3年後、似たようなものを探しています。受け入れ可能な「クイック」ソリューションが見つからなかったため、OPの基準に非常に近いものを作成しました。他の人が将来役に立つかもしれないと思います。

JavaScriptはイベント駆動型であるため、pure-javascript確認関数を一時停止するために使用できる「待機」または「スリープ」ループをサポートしていません。オプションには、プロセッサプラグインの書き込み、ブラウザプラグインの使用、またはAJAXが含まれます。ますますモバイル化が進み、インターネット接続がむらがある場合、これらはどれも優れたソリューションではありません。つまり、「確認」機能からすぐに戻る必要があります。

ただし、上記のコードスニペットには「false」ロジックがないため（つまり、ユーザーが[キャンセル]をクリックしても何も実行されない）、ユーザーが[OK]をクリックすると、もう一度「click」または「submit」イベントをトリガーできます。 」フラグを設定し、「確認」機能内でそのフラグに基づいて反応してみませんか？

私のソリューションでは、「モーダル」ダイアログではなくFastConfirmを使用することを選択しました。必要なものを使用するようにコードを簡単に変更できますが、私の例はこれを使用するように設計されています

https://github.com/pjparra/Fast-Confirm

これが何をするのかという性質のため、私はそれをパッケージ化するきれいな方法を見ていません。これにラフなエッジが多すぎると感じた場合は、他の人が推奨する方法でそれらを滑らかにするか、コードを書き直してください：

/* This version of $.fn.hasEvent is slightly modified to provide support for
 * the "onclick" or "onsubmit" tag attributes. I chose this because it was
 * short, even if it is cryptic.
 *
 * Learn more about the code by Sven Eisenschmidt, which is licensed under
 * the MIT and GPL at:
 *     http://github.com/fate/jquery-has-event
 */
(function($) {
    $.fn.hasEvent = function(A, F, E) {
        var L = 0;
        var T = typeof A;
        E = E ? E : this;
        var V = (E.attr('on'+A) != undefined);
        A = (T == 'string') ? $.trim(A) : A;
        if (T == 'function')
            F = A, A = null;
        if (F == E)
            delete(F);
        var S = E.data('events');
        for (e in S)
            if (S.hasOwnProperty(e))
                L++;
        if (L < 1)
            return V; // = false;
        if (A && !F) {
            return V = S.hasOwnProperty(A);
        } else if(A && S.hasOwnProperty(A) && F) {
            $.each(S[A], function(i, r) {
                if(V == false && r.handler == F) V = true;
            });
            return V;
        } else if(!A && F) {
            $.each(S, function(i, s) {
                if (V == false) {
                    $.each(s, function(k, r) {
                        if (V == false && r.handler == F)
                            V = true;
                    });
                }
            });
        }
        return V;
    }
    $.extend($, {hasEvent: $.fn.hasEvent});
}) (jQuery);

/* Nearly a drop-in replacement for JavaScript's confirm() dialog.
 * Syntax:
 *   onclick="return jq_confirm(this, 'Are you sure that you want this?', 'right');"
 *
 * NOTE: Do not implement "false" logic when using this function. Find another way.
 */
var jq_confirm_bypass = false;
function jq_confirm(el, question, pos) {
    var override = false;
    var elem = $(el);

    if ($.fn.fastConfirm == undefined) {
        override = confirm(question);
    } else if (!jq_confirm_bypass) {
        if (pos == undefined) {
            pos = 'right';
        }

        elem.fastConfirm({
            position: pos,
            questionText: question,
            onProceed: function(trigger) {
                var elem = $(trigger);
                elem.fastConfirm('close');

                if (elem.hasEvent('click')) {
                    jq_confirm_bypass = true;
                    elem.click();
                    jq_confirm_bypass = false;
                }
                if (elem.hasEvent('submit')) {
                    jq_confirm_bypass = true;
                    elem.submit();
                    jq_confirm_bypass = false;
                }
                // TODO: ???
            },
            onCancel: function(trigger) {
                $(trigger).fastConfirm('close');
            }
        });
    }

    return override ? override : jq_confirm_bypass;
}

したがって... onclick = "return confirm（ 'これをテストしますか？'）;" onclick = "return jq_confirm（this、 'これをテストしますか？'）;"になりますpos/"right"パラメーターはオプションであり、Fast-Confirm専用です。

クリックすると、jq_confirm（）関数がjQueryダイアログを生成し、「false」を返します。ユーザーが「OK」をクリックすると、jq_confirm（）がフラグを設定し、元のクリック（または送信）イベントを呼び出し、「true」を返し、同じページに残りたい場合にフラグを設定解除します。

0
EpicVoyage

次のリンクには、JavaScriptでconfirm（ "something"）のように作成するのに似た確認ボックス用のjQueryプラグインがあります

http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

0
Sathesh