Question

I am currently trying to create a login button that is similar to that of dropbox. There is another thread available on how to do this, but I wish to do it differently. Note I tried to follow the code provided in that thread as close as I can, but it was a failed attempt.

Rather than having a link written in text, my button refers to a link through an image. Furthermore, when the button is pressed, I want another image to popup right below it.

Here is my code:

html/ jquery /php code:

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 code:

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

If possible I would also like to know if this can be done using html 5 and css only?

Thanks in advance

Answer 1

I have managed to do this. Here is the code:

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