1

ページ全体にソーシャルアイコンがリストされたWebサイトがあります。いずれかをクリックすると、ウィンドウが表示され、詳細情報が表示されます。これは、ユーザーがアイコンをクリックした後の外観の写真です。

ここに画像の説明を入力してください

そのポップオーバー全体は、それ自体のdivに自己完結しています。

ボタンごとに異なる座標でハードコーディングするよりも動的な方法を探しています。

前もって感謝します。

HTML

<div id='inset'>
    <div id='icon-gutter'>
        <div id='gutter-loader'>


        </div>
        <div id='icons'>
        <img src='images/facebook.png' id='facebook' />
        <img src='images/twitter.png' id='twitter' />
        <img src='images/google+.png' id='google+' />
        <img src='images/linkedin.png' id='linkedin' />
        <img src='images/reddit.png' id='reddit' />
        <img src='images/tumblr.png' id='tumblr' />
        <img src='images/pinterest.png' id='pinterest' />
        <img src='images/youtube.png' id='youtube' />
        <img src='images/lastfm.png' id='lastfm' />
        <img src='images/instagram.png' id='instagram' />
        <div id='pop-over-wrap'>
            <div id='arrow'>
            </div>
        <div id='pop-over-body'>
            Hello
        </div>
        </div>
        </div>

    </div>
</div>

CSS

#inset {
margin: 0;
padding: 0;
background: url(grey-fabric.png) repeat; /*#001121;*/
height: auto;
max-width: 100%;
position: relative;
padding: 14px 10px 10px 22px;

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px;

}
#icon-gutter {

    height: auto;
    min-height: 43px;
    position: relative;
    text-align: center;
}

#icons {
    opacity:0;
}
#icons img {

    height: 95px;
    position: relative;
    margin: 0 8px;
    cursor: pointer;

    transition: all .2s;
-moz-transition: all .2s; /* Firefox 4 */
-webkit-transition: all .2s; /* Safari and Chrome */
-o-transition: all .2s; /* Opera */

}
#pop-over-wrap {
    padding: 10px;
    position: absolute;
    width: 200px;
    height: 230px;
    background-color: white;
     border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px;
    margin-top: 20px;
    margin-left: 300px;

    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}
#arrow {
    position: relative;
    background: url(images/arrowup.png) no-repeat;
    background-position: top center;
    height: 40px;
    margin-top: -30px;

}
#pop-over-body {


}
4

6 に答える 6

1

cssルールの余白を削除し、#pop-over-wrapjQueryを介して配置を処理します。

$(function(){

    var popup = $('#pop-over-wrap'),
        popupOffset = popup.outerWidth()/2,
        arrowExceed = 30; // how many pixel the arrow exceeds from the containing wrapper.

    $('#icons > img').click(function(){
        var icon = $(this),
            iconPos = icon.position(),
            iconW = this.width,
            iconH = this.height,
            popupTop = iconPos.top + iconH + arrowExceed,
            popupLeft = iconPos.left + iconW/2 - popupOffset;

        popup.css({left:popupLeft, top:popupTop});
        popup.show();
    });

});

http://jsfiddle.net/ALFfs/1/デモのデモで
は、画像にアクセスできないため、画像の幅がハードコーディングされています。

于 2012-09-23T18:16:27.147 に答える
0

このjqueryプラグインをチェックして、必要なことを実行してください

于 2012-09-23T18:11:57.967 に答える
0

次のように、各imgにイベントを作成できます。

$('#icons').find('IMG').each(function(){
    $(this).click(function(){  
       var idBlock = $(this).attr('id');
        //Code of showing popup window idBlock type
          var htmlBasedonIdBlock = GetBlockHtml(idBlock)
         $('#pop-over-wrap').html(htmlBasedonIdBlock)
   })
})

ブロックのタイプに応じてhtmlを取得するGetBlockHtml関数

ほろ酔いを使用するので、本文のコンテンツにhtmlを作成するだけで、すべての作業は1人で行われます。

これにほろ酔いを使用しない場合は、他の多くのjqueryプラグインhttp://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

于 2012-09-23T18:06:25.873 に答える
0

こちらをご覧ください：CSSツールチップと吹き出し。

これらのボックスの座標を正確に計算する必要はありません。これを行うにはCSS3のトリックがたくさんあります。ねえ、あなたもJavascriptを使用する必要はありません！ただし、おそらく互換性を検討している場合は、ツールチップの実行を支援するためにこのjQueryプラグインの使用を検討してください。

于 2012-09-23T18:15:49.773 に答える
0

imgそれぞれをdivポップオーバーと一緒に入れるとどうなりますか。次に、コンテナdivを相対位置に配置し、ポップを絶対位置に配置しますか？

このような：

<div class="icon">
    <img src='images/facebook.png' id='facebook' />
    <div class="popover">
        <div id='arrow'>
        </div>
        <div id='pop-over-body'>
            Hello
        </div>
    </div>
</div>

そしてcssで：

.icon{
    position:relative;
}
.popover{
    position:absolute;
    left:-30px;
    top:10px;
}

あなたはその考えを理解しますか？アイコンを順序付けられていないリストに入れるとさらに便利です。

于 2012-09-23T18:17:29.967 に答える
0

画像のコンテナとしてdivを使用したり、情報を含むdivを使用したりできます。例えば：

<div id="container-1">
   <img src='images/facebook.png' id='facebook' />
   <div id="information-1" class="information-block hideElement"></div>
</div>
<div id="container-2">
   <img src='images/twitter.png' id='twitter' />
   <div id="information-2" class="information-block hideElement"></div>
</div>

どこ

.hideElement { display: none; }
.information-block { position: relative; top: 10px; left: -20px; width: 100px;} //for example

また、jQueryを使用すると、最初のコンテナーをクリックしたときに最初のコンテナーの情報ブロックを表示できます。

$("#container-1").click(function() {
   $("#information-1").removeClass("hideElement");
});
于 2012-09-23T18:20:08.520 に答える