在打开fancybox之前需要确认

时间:2011-11-14 20:56:14

标签: javascript jquery javascript-events fancybox

我需要用户确认他想要在打开fancybox之前结束当前以创建新游戏。

我都试图停止onClick事件传播: 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>

并尝试根据确认结果取消绑定/绑定fancybox: 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是$.fn.fancybox的包装。

但这些方法都没有效果。

2 个答案:

答案 0 :(得分:1)

不是将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>

答案 1 :(得分:1)

有一种更优雅的方式:

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