In my simple CSS code, I have used a litebox view. I removed unnecessary CSS properties to keep it clean:
<style>
.black_overlay{
display: block;
}
.white_content {
display: block;
}
</style>
Here is the HTML 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>
Additionally, there is a JavaScript function to verify the input fields:
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 desired functionality is to close the lite box when the user inputs the correct username and password, which is currently not happening. I would also like the litebox effect to be displayed as soon as the page loads.