ボタンのようにfacebookの閉じるボタンontopを重ねるが、機能を維持する

Question

私はFacebookのコーディング全体を理解していないので、これを実現しようとしてきた。私が基本的に必要とするのは、人々が "vind ik leuk"ボタン（別名「このページのように」）をクリックすると、私のモーダルが閉じることだけです。だから私は透明なdivまたはスパンでそれを試してみると、モーダルは閉じますが、そのようなボタンは機能を失います。トランスパルシー自体は依然として色の価値があるからだと思います。どのように私は私のモーダルを閉じることができます人々は、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> 

Answer 1

あなたの透明ボタンにこのCSSルールを追加してみてください：

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

は、その要素をクリックする必要があります。

Answer 2

'pointer-events: none;'をオーバーラップするdiv/spanに置きます。

Answer 3

ポインタイベント 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のライブ出力ではなく、別のウィンドウで適切にしか見ることができません。