通过灯箱效果登录表单

login form through lightBox Effect

本文关键字：登录 表单      更新时间：2023-09-26

我用了最简单的CSS来显示一个litebox视图。我使用的代码是，我已经从这里删除了不必要的CSS属性：

<style>
        .black_overlay{
            display: block;
        }
        .white_content {
            display: block;
        }
    </style>

表单的 HTML 

 <div id="light" class="white_content">      
        <input id="name" name="name" type="text" />
        <input id="password" name="password" type="password" />
        <input type="submit" name="submit" value="Sign In" onclick="check(this.form)"/>
        </div>
        <div id="fade" class="black_overlay"></div>

还有一个JavaScript函数，用于检查字段是否正确

function check(form)/*function to check userid & password*/
{
var name= $( "#name" );
var pass=$("#password");
 if(name== "admin" && pass == "admin")
  {
  document.getElementById('light').style.display='none';
  document.getElementById('fade').style.display='none';
  }
 else
 { 
   alert("Error Password or Username");/*displays error message*/
  }
}

我想要的功能是，当用户输入正确的名称并传递时，即"admin"精简框效果消失......但事实并非如此，精简版框仍然存在。我怎样才能关闭它。我还希望在页面加载时显示此litebox效果。

提交事件是否未捕获和阻止？在标记中没有形式。如果你添加它像

<form id="submit-me"> your form inputs </div>

你可以通过JS观察它

$("#submit-me").submit(function(event) {
  // your js code
  event.preventDefault();
});

对于您的实际示例，您可以尝试在 onclick 处理程序中添加"返回 false;"？但我不知道这是否有效...

此致敬意

替换 

var name= $( "#name" );
var pass=$("#password");

跟

var name= $( "#name" ).val();
var pass=$("#password").val();
相关文章：