2016-11-16 63 views
0

我一直在努力得到這個工作,因爲我不明白整個facebook編碼。所有我基本需要的是當人們點擊「vind ik leuk」按鈕(又名「像這個頁面」)時關閉的模式。所以我試圖用透明的div或甚至跨度來做這件事,模式關閉,但類似的按鈕失去功能。我想這是因爲透明度本身仍然是一種顏色價值。當人們喜歡Facebook頁面時,如何關閉我的模式?覆蓋關閉按鈕ontop的Facebook像按鈕,但保持功能

我的代碼我試過:(有一個開放腳本標籤,但它不會顯示在這裏出於某種原因)

 window.fbAsyncInit = function() 
     { 
      FB.init(
      { 
       appId  : '202822426829643', 
       xfbml  : true, 
       version : 'v2.8' 
      }); 
      FB.AppEvents.logPageView(); 
     }; 

     (function(d, s, id) 
     { 
      var js, fjs = d.getElementsByTagName(s)[0]; 
      if (d.getElementById(id)) 
      { 
       return; 
      } 
      js = d.createElement(s); js.id = id; 
      js.src = "//connect.facebook.net/en_US/sdk.js"; 
      fjs.parentNode.insertBefore(js, fjs); 
     } 
     (document, 'script', 'facebook-jssdk')); 

    </script> 

    <!-- facebook --> 
    <div id="id00" style="z-index: 3; padding-top: 100px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4)"> 

     <div class="w3-modal-content w3-animate-top w3-card-2"> 

      <header class="w3-container w3-yellow"> 

       <span onclick="document.getElementById('id00').style.display='none'" class="w3-closebtn">&times;</span> 

       <h3><b>like kace op facebook om onze adventskalender te gebruiken</b></h3> 

      </header> 

      <div class="w3-container w3-padding-32"> 

       <span class="w3-transparent" style="width: 100px; height: 23px; margin-left: -390px; margin-top: 98px; float: left; z-index: 10; position: fixed" onclick="document.getElementById('id00').style.display='none'"></span> 

       <iframe style="float: left; margin-left: 0px; z-index: 0" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fwe.are.kace%2F%3Fpnref%3Dlhc&tabs=timeline&width=180&height=125&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=202822426829643" width="180" height="125" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 

      </div> 

     </div> 

    </div> 
+0

就像門控是不允許的。你不能因爲用戶喜歡你的頁面而改變任何東西 – WizKid

回答

1

嘗試加入這個CSS規則的透明按鈕:

.w3-transparent { 
    pointer-events: none; 
} 

它應該允許點擊該元素。

+0

謝謝!我會嘗試 –

0

'pointer-events: none;'放在重疊的div/span上。

0

指針事件在IE11之前不工作。這種做法非常不方便,就是利用你已經包含的Facebook JS SDK。有一個edge.create event你可以訂閱。

有幾個需要注意的地方:

  1. ,您必須出示與SDK,而不是你的iframe頁面窗口小部件。從這裏獲取代碼https://developers.facebook.com/docs/plugins/page-plugin
  2. 當Facebook實際處理類似請求時,而不是點擊按鈕時,會觸發該事件。

請注意,移除等等(點擊按鈕,如果你已經喜歡的頁面)是一個單獨的事件edge.remove

這裏是你想要的一個例子:https://jsbin.com/yitopoyalo

在右上角點擊JSbin按鈕。由於iframe的工作原理,您只能在單獨的窗口中正確看到輸出,而不能在JSBin的實時輸出中看到輸出。

+0

也要試試這個!感謝您解釋得很好的答案:) –