5

訪問者がページを「いいね」したり「+」したりできる「ソーシャル スライダー」をまとめました。このスライダーのコンテナーは、ブラウザーの右下隅に表示されます。[いいね] ボタンをクリックした場合を除いて、すべて正常に機能します。コメントを許可するポップアップ ダイアログがページの外に表示されます。

そのダイアログが表示される場所/方法を構成できる、私が見ていない方法はありますか?

<div id="social-container">
<div class="fb-like" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div>
</div>

そしてCSS：

#social-container {
        clear: both;
        z-index: 999;
        position: fixed;
        bottom: 120px;
        right: 20px;
    }

ここに画像の説明を入力

4

7 に答える 7

2

ポップアップボックスはiframeであり、クロスドメインiframeのcssを制御できないため、ポップアップボックスを表示する場所を選択することはできません（このためのパラメーターはありません）。

あなたができる唯一のことは、ダイアログが隠されたままになるように、いいねボタンのiframeのサイズを制限することです：

#fb-like iframe {
    width: 62px !important; height: 24px !important;
}
于 2012-11-13T17:10:25.340 に答える
2

おそらくオーバーフロー属性の問題です。これを #social-container または body に追加してみてください:

overflow: auto;

また

overflow: visible;

また

overflow: scroll;
于 2012-11-16T16:21:58.957 に答える
1

これは明らかなように思えるかもしれませんが、好きなブラウザー ツールで要素を調べ、ポップアップ コンテナーの名前を見つけ、それに応じて追加および調整します。

元：

#social-container.popup {
  position: absolute;
  right: 150px;
于 2012-11-13T21:20:13.380 に答える
1

したがって、これで問題が解決する可能性は低いです.これを行う方法を知るのに十分な能力があり、実際に問題を評価するための実際のコードを投稿していないため、使用しているFacebook APIを正確に把握できません.

クリックイベントとiframeの幅などをキャプチャして、オフセットを比較することはできませんか? 何かのようなもの -

$("#social-container").click(function(e){
  var facebookSelector = $( iframe selector here );
  var iframeHeight = facebookSelector.height();
  var iframeWidth = facebookSelector.width();
  var winHeight = $(window).height();
  var winWidth = $(window).width();

  if ( e.clientY && e.clientX ){
    //Set the top based on where mouse click occured
    if ( e.clientY > (winHeight-iframeHeight) ){
      facebookSelector[0].style.top = winHeight-iframeHeight + "px";
    }
    else {
      facebookSelector.style.top = e.clientY + "px";
    }
    //Set the left based on where mouse click occured
    if ( e.clientX > (winWidth-iframeWidth) ){
      facebookSelector[0].style.left = winWidth-iframeWidth + "px";
    }
    else {
      facebookSelector[0].style.left = e.clientX + "px";
    }
  }
}

上記の例は冗長ではありません-

$("#social-container").click(function(e){
  var facebookSelector = $( iframe selector here );
  var h = $(window).height() - facebookSelector.height();
  var w = $(window).width() - facebookSelector.width();

  if ( e.clientY && e.clientX ){
    //Set the top based on where mouse click occured
    facebookSelector[0].style.top = ( e.clientY > h ) ? h + "px" : e.clientY + "px";
    //Set the left based on where mouse click occured
    facebookSelector[0].style.left = ( e.clientX > w ) ? winWidth-iframeWidth + "px" : e.clientX + "px";
  }
}

クリック位置の代わりに facebook のようなボタンの位置を使用することもできます (または、本当に必要なものは何でも)。

警告と補遺:
1. iframe (または何でも) の ID が facebook によって動的に生成されていて、それを制御
できない場合、これはそれほど簡単には機能しません。 2. [いいね!] ボタンがiframe で、イベントがコンテナーにバブリングするのを防ぎます。
3. この例では、現在 jQuery が必要です。
4.あなたのiframe（または何でも）は、position: absoluteまたはposition: fixed

于 2012-11-15T15:31:03.703 に答える
1

あなたのレイアウトがどうしても「このページが好きでしたか」ボックスを右側からトリガーする必要がある場合は、ボックスを広げてコンテンツを左側に配置することを検討できますか?

これにより、このポップアップ コンテンツが表示されるスペースが増えるはずです。

また、CSS を使用してページの下部に十分なスペースを追加し、これを拡張できるようにする必要があります。その配置は、表示されたときに独自のスペースを追加しない可能性が最も高いです。

于 2012-11-12T16:45:51.923 に答える
0

少し前までは、css を使用して (css ファイルの URL をソーシャル プラグイン コードに渡すことで) ソーシャル プラグインの一部を変更することができましたが、これはもはや不可能であり、ほとんどそのままにしなければなりません。いいえ、これは不可能です。これらのソーシャル プラグインはクローズド システムです。あなたができる唯一のことは、いいねボタンが左側のどこかにあるようにすべてを設計することです.

于 2012-11-09T17:27:50.860 に答える
0

上記の解決策はどれもうまくいきませんでした。Facebookのようなボタンがページ外に表示されるという簡単な修正を見つけたところ、うまくいきました。

他の人の時間を節約できることを願っています, 乾杯!

于 2014-07-26T08:51:49.160 に答える