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