Php 登录按钮类似于使用图像的dropbox

我目前正在尝试创建一个类似于dropbox的登录按钮。关于如何做到这一点，还有另外一种方法，但我希望做得有所不同。注意：我试图尽可能地遵循该线程中提供的代码，但尝试失败

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

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

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

这是我的密码：

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

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

如果可能的话，我也想知道这是否可以只用HTML5和css来完成

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

---

提前谢谢

我已经做到了。代码如下：

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

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

echo'；
回声'；
回声'；
//HTML内部弹出窗口
回声'；
回声'；
回声'；
回显“$”（“#登录按钮”）。单击（函数（e）{”；
echo'$（“#弹出”）.css（“可见性”、“可见”）；
回音“e.stopPropagation（）；”；
回声'}）；'；
回显“$”（“#弹出”）。单击（函数（e）{”；
回音“e.stopPropagation（）；”；
回声'}）；'；
回显“$”（“正文”）。单击（函数（e）{”；
echo'$（“#弹出”）.css（“可见性”、“隐藏”）；
回声'}）；'；

我注意到的一件事是，我没有为#popup声明任何样式，因为所有必需的样式都分别在logbutton和popupimage中完成。事实上，在我的css文件中没有提到弹出窗口，这可能是代码的一个错误吗？我刚刚意识到javascript删除没有一个双引号。这已经过调整，但主要问题仍然存在。我还修改了php代码，通过php编写javascript。不幸的是，主要问题仍然存在，这已经解决了。当我有空的时候，我会写一个答案