Question

我正在尝试创建一个登录页面，但我遇到了问题...

register.html代码：

<a href="login.html">Login</a>

login.html代码：

<div id="loginmodal" style="display:none;">
    <h1>User Login</h1>
    <form id="loginform" name="loginform" method="post" action="index.html">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" class="txtfield" tabindex="1">
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" class="txtfield" tabindex="2">

        <div class="center">
            <input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3">
        </div>
    </form>
</div>

点击login.html上的登录后，我想在login.html上loginmodal display: all;与display:none;

相关联

我该怎么做？

Answer 1

1）为id代码提供class或<a>

2）在css中将div loginmodal设置为display:none

3）在锚标记的jquery on click中，显示loginmodal

HTML：

<a id="login-link" href="login.html">Login</a>


 <div id="loginmodal">
  <h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" class="txtfield" tabindex="1">
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" class="txtfield" tabindex="2">

  <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>

CSS：

#loginmodal{display:none;}

Jquery的：

$(document).ready(function(){
$('#login-link').click(function(){
$("#loginmodal").show();
});

用户登录时取消隐藏CSS Div

1 个答案: