Require confirmation before opening fancybox

Question

I need the user to confirm that he wants to end the current before opening the fancybox to create a new game.

I have both tried to stop onClick event propagation: How to stop event propagation with inline onclick attribute?

<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>

And tried to unbind/bind fancybox based on confirmation results: Unbinding Fancybox on thumbnail fade

<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 is a wrap of $.fn.fancybox.

But none of the approaches worked.

score 1 · Accepted Answer · answered Nov 14 '11 at 21:34

Instead of binding fancybox to a tag on the DOM, you can simply wait until it's needed to initialize it, and tie it to an element that isn't in the DOM. It's much cleaner to do it this way.

<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>

Thank you it works.. But why isn't it working with the stop onClick event propagation? — Morten Holmgaard, Nov 15 '11 at 16:32

score 1 · Answer 2 · answered Feb 23 '12 at 14:07

There is a more elegant way:

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

Require confirmation before opening fancybox

2 Answers2