0

現在、ドロップボックスに似たログインボタンを作成しようとしています。これを行う方法については別のスレッドがありますが、別の方法で行いたいと考えています。そのスレッドで提供されているコードにできるだけ近づけようとしましたが、失敗しました。

リンクをテキストで記述するのではなく、私のボタンは画像を通じてリンクを参照します。さらに、ボタンを押すと、そのすぐ下に別の画像がポップアップするようにします。

これが私のコードです：

html/jquery/php コード: 

echo '<div id = popup>';
  echo '<a href="#" id ="logbutton"></a>';
  echo '<div id = "popupimage"> </div>';
echo '</div>';

echo '<script type="text/javascript src="jquery.js">';
echo '$("#popup").click(function(e){ 
$("#popupimage").css("visibility","visible");
e.stopPropagation();
});';
echo '</script>';

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;   
}

可能であれば、html 5 と css のみを使用してこれを行うことができるかどうかも知りたいですか?

前もって感謝します

4

1 に答える 1

0

私はこれを行うことができました。コードは次のとおりです。

    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 '});';
于 2012-11-13T18:29:03.317 に答える