php - 登录按钮，类似于使用图像的 Dropbox

Question

我目前正在尝试创建一个类似于 Dropbox 的登录按钮。关于如何执行此操作还有另一个线程可用，但我希望以不同的方式进行。请注意，我尝试尽可能地遵循该线程中提供的代码，但这是一次失败的尝试。

我的按钮不是用文本编写的链接，而是指通过图像的链接。此外，当按下按钮时，我希望在它的正下方弹出另一个图像。

这是我的代码：

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 来完成？

提前致谢

Answer 1

我设法做到了这一点。这是代码：

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