2015-06-11 107 views
0

在下面的代碼中,兩個按鈕都應該切換彈出窗口,但只有一個可以正常工作。jquery fancybox does not show

的第一個按鈕(提交)將提交表單,但彈出拒絕打開

第二個按鈕(TEST)不提交表單,但彈出窗口顯示了

我不明白爲什麼它不工作。第一個按鈕應該提交表單並打開彈出窗口。

<script type="text/javascript" src="https://www.ni-dieu-ni-maitre.com/scripts/jquery.fancybox.js?v=2.1.1"></script> 
<link rel="stylesheet" type="text/css" href="https://www.ni-dieu-ni-maitre.com/scripts/jquery.fancybox.css?v=2.1.1" media="screen" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.fancybox').fancybox(); 

     $('.fancybox').click(function() { 
      $.fancybox.open({}); 
     }); 

     $("#popupajouterpanier").fancybox({ 
      openEffect: 'elastic', 
      openSpeed: 150, 
      closeEffect: 'elastic', 
      closeSpeed: 150, 
      width: 500, 
      height: 300, 
      scrolling: 'no', 
      padding: 15 
     }); 

     $("#popupajouterpanier2").fancybox({ 
      openEffect: 'elastic', 
      openSpeed: 150, 
      closeEffect: 'elastic', 
      closeSpeed: 150, 
      width: 500, 
      height: 300, 
      scrolling: 'no', 
      padding: 15 
     }); 
    }); 
</script> 

</head> 

<body> 

    <div id="ribbonmenu"> 
     <div class="ribbon"> 
      <a href="https://www.ni-dieu-ni-maitre.com/commande.php" rel="nofollow" class="navlink basketUrlHolder" id="navlink">BASKET </a> 
      <span class="basket-counter">0</span></a> 

     </div> 
    </div> 

    <script src="https://www.ni-dieu-ni-maitre.com/shop-controller.js"></script> 
    <form action="" style="padding: 0px;" method="post" name="tshirt_form" id="tshirt_form" onload="hideProgress()"> 
     <input type="hidden" name="product" id="productId" value="1000933638" /> 
     <input type="hidden" name="article" id="articleId" value="16047246" /> 
     <input type="hidden" name="view" id="currentView16047246" value="351" /> 
     <input type="hidden" name="color" id="productColor16047246" value="2" /> 
     <select class="b-core-ui-select__select" id="size" name="size" onchange="redirect(this);"> 
      <option selected value="3">M</option> 
     </select> 
     <select class="b-core-ui-select__select" id="quantity" name="quantity"> 
      <option selected value="1">1</option> 
     </select> 

     <a style="position:relative;top:10px;" onclick="document.getElementById('loader').style.display='block';hideProgress()" id="popupajouterpanier" href="#inlinepopupajouterpanier">SUBMIT</a> 
    </form> 

    <a style="position:relative;top:10px;" onclick="document.getElementById('loader').style.display='block';hideProgress()" id="popupajouterpanier2" href="#inlinepopupajouterpanier">TEST</a> 

    <div style="display: none;"> 
     <div id="inlinepopupajouterpanier2" style="width:550px;height:350px;text-align:center;"> 
      if this popup shows up, then it's working !!!! 
     </div> 
    </div> 

回答

0

按鈕的ID不應該是一樣的。我找到了它的「popupajouterpanier」。它只能在唯一的ID名稱的情況下工作。

+0

即使ID是唯一的也不會改變任何東西,我會更新代碼。 – libertaire

+0

您還需要更改它在按鈕代碼中,談論的HTML代碼 –

+0

仍然無法正常工作。 – libertaire