0

この投稿に従って、 dropboxのログインボタンに似たボタンを作成しました。

より具体的には、ここに私が使用しているコードがあります:

echo '<a href="#" id ="loginbutton"></a>';

    echo '<div id = "popup">';
    echo '<div id = "popupimage"> </div>';

//HTML INSIDE POPUP

    echo '</div>';

    echo '<script type="text/javascript" src="jquery.js"></script>';
    echo '<script>';

    echo '$("#loginbutton").click(function(e){';
    echo '$("#popup").css("visibility","visible");';
    echo 'e.stopPropagation();';
    echo '});';

    echo '$("#popup").click(function(e){';
    echo 'e.stopPropagation();';
    echo '});';

    echo '$("body").click(function(e){';
    echo '$("#popup") . css("visibility", "hidden");';
    echo '});';

CSS:

#logbutton{
    top:50px;
    left:850px;
    position: absolute;
    background-image: url(../images/buttons/loginbutton.png);
    width:59px; 
    height:28px;   
}

#popupimage{
    top:63px;
    left:887px;
    position: absolute;
    background-image: url(../images/popupimage.png);
    visibility: hidden;
    width:400px; 
    height:600px;   
}

ボタンが機能し、ポップアップも表示されます。

ポップアップ画像の css は、画像が表示される場所の絶対位置を指定しており、これが問題の原因となっています。ボタンの前に動的コンテンツを追加したいので、ボタンがどの位置にあるのか本当にわかりません。これにより、popupimage がボタンの近くに配置されません。

ボタンの絶対位置を知ることは可能で、popupimage (jquery を使用) をその横に表示するように設定できます。以前に動的テキストを使用したため、一定の固定位置がないことを思い出してください。

4

2 に答える 2

0

.offset()を参照してください:

    echo '$("#loginbutton").click(function(e){';
    echo 'var $target = $(this);'
    echo '$("#popup").offset({ top: $target.offset().top, left: $target.offset().left+$target.outerWidth()}).css("visibility","visible");';
    echo 'e.stopPropagation();';
    echo '});';
于 2012-11-13T18:43:13.077 に答える
0

position: relative;ドロップボックスがしたことをして、ボタンとポップアップを配置された要素にラップしてみませんか? 相対的に配置された要素は動的コンテンツとともに流れますが、そのposition: absolute;中の要素は自動的にラッパーの位置に相対的になります。これは、jQuery を使用して理解しようとするよりもはるかに簡単です。

アップデート

# CSS
.position_me_relative {
  position: relative;
}
.within_the_relative_wrapper {
  /* 
   This will flow inside the wrapper like a normal element.
   For example, it will obey any padding you apply to the parent element.
  */
  position: relative; 
}
.absolute_popup_relative_to_wrapper {
  /* As an example:
    This will position the popup so its lower right corner
    is touching the lower right corner of the wrapper regardless
    of where the wrapper shows up on the page.
  */ 
  position: absolute;
  bottom: 0px;
  right: 0px;
  /*
    top and left can also be used for positioning
    negative values can also be used and the absolute element
    can be positioned so it appears "outside" the wrapper element
    i think if you play around with some different values for 
    top, bottom, left and right you'll get the idea pretty quick
  */
}

# Markup
<div class="position_me_relative">
  <a class="within_the_relative_wrapper"></a>
  <div class="absolute_popup_relative_to_wrapper"></div>
</div>
于 2012-11-13T18:54:19.397 に答える