将登录表格对齐到屏幕的中上部

时间：2015-03-04 08:45:19

标签： javascript html forms login alignment

我有弹出登录屏幕的按钮值显示登录页面onclick功能。我正确地执行了单击功能，但我希望该表单显示在屏幕的顶部中间。我试过但它只在左中间对齐。

<html>
<head>
<title></title>
</head>
    <body>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="pop.js"></script>
    <input type="button" value="Show Login Page" onclick="showLogin();">
<form style="visibility:hidden" name="loginform" method="post" action="#">
<br><br>
<table align="top"><tr><td><h2>Login Authentication</h2></td></tr></table>
<table align="top" style="border:1px solid #000000;background-color:#efefef; height: 78px;">
<tr><td colspan=2></td></tr>
<tr><td colspan=2> </td></tr>
  <tr>
  <td><b>Login Name</b></td>
  <td><input type="text" name="userName" value=""></td>
  </tr>
  <tr>
  <td><b>Password</b></td>
  <td><input type="password" name="password" value=""></td>
  </tr>
  <tr>
  <td></td>
  <td><input type="submit" name="Submit" value="Submit"></td>
  </tr>
  <tr><td colspan=2> </td></tr>
</table>
</form>
</body>
</html>

Pop.js：

<script type="text/javascript">
    function showLogin() {
        document.loginform.style.visibility = "visible";
    }
</script>

屏幕截图实际：

enter image description here

预期截图：

enter image description here

1 个答案:

答案 0 :(得分：1)

为 loginform 设置左边距，如下所示：

#loginform{
   margin-left:50%;
}

将id作为loginform形成如下所示：

<form  name="loginform" id="loginform" method="post" action="#">

或

您还可以使用以下css：

#loginform
{
   position:fixed;
    left:40%;

}

Here is JSFIddle

Here is Full Example

根据评论更新：

请查看更新的代码 - HERE

相关问题
最新问题