Требовать подтверждение перед открытием fancybox

Question

Мне нужно, чтобы пользователь подтвердил, что он хочет завершить текущий, прежде чем открывать fancybox, чтобы создать новую игру.

Я пытался остановить распространение события onClick: Как остановить распространение события с помощью встроенного атрибута onclick?

<a href="../Dialogs/CreateGameDialog.aspx" class="createGameLink showDialog" onclick=" if(!confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){ disabledEventPropagation(arguments[0]); return false;} return true;">
    <script type="text/javascript">
        function disabledEventPropagation(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            }
            else if (window.event) {
                window.event.cancelBubble = true;
            }
        } 
    </script>

И попытался отсоединить / связать fancybox на основерезультаты подтверждения: Отмена привязки Fancybox при исчезновении миниатюр

<a href="../Dialogs/CreateGameDialog.aspx" class="createGameLink showDialog" onclick=" if(!confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){ $('.createGameLink.showDialog').unbind('click.fb'); return false;} else{ bindCreateGameDialog(); return true;}">
<script type="text/javascript">
    $('.createGameLink.showDialog').setFancybox( { 'height': 400, 'width': 200 } );
</script>

setFancybox - обтекание $.fn.fancybox.

Но ни один из подходов не сработал.

Answer 1

Есть более элегантный способ:

<script type="text/javascript">
    $('.createGameLink.showDialog').setFancybox({
        'height': 400,
        'width': 200,
        'onStart': function(){if(!confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){return false;}} 
    } );
</script>

Answer 2

Вместо привязки fancybox к тегу в DOM, вы можете просто подождать, пока он не потребуется для его инициализации, и связать его с элементом, которого нет в DOM. Так гораздо чище.

<a href="../Dialogs/CreateGameDialog.aspx" class="createGameLink showDialog" onclick=" if(confirm('<%# Strings.LoggedIn_ComfirmStartNewGame %>')){ openfancybox();} return false;">
    <script type="text/javascript">
        function openfancybox() {
            var a = document.createElement('a');
            var jqA = $(a);

            jqA.fancybox({
                'autoDimensions': false,
                'width': '400',
                'height': '200',
                // more options here, including which url/element to open, etc...
            });

            jqA.click();
        } 
    </script>