通过lightBox效果登录表单

Question

I have used a simplest CSS to show a litebox view. The code I used is, I have removed the unnecessary CSS properties from here:

<style>
        .black_overlay{
            display: block;

        }
        .white_content {
            display: block;

        }
    </style>

Html for the form

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

And a JavaScript function, to check if the fields are correct

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*/
  }
}

The functionality I want is, when the user inputs correct name and pass, that is "admin" the lite box effect fade away... But it is not, the lite box is still there. How can i close it. I also want that this litebox effect should be shown as the page loads.

Answer 1

Replace

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

with

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

Answer 2

Is the problem that the submit event is not captured and prevented? In The markup there is no form. If you add it like

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

you can observe it via JS

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

For your actual example you could try to add a "return false;" in the onclick handler? But I do not know whether this works...

Best regards