打開fancybox之前需要確認

Question

我需要用戶確認他想在打開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渦卷。

但是沒有一種方法奏效。

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

Answer 2

還有一種更優雅的方式：

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