You want a popup box that asks for a password?
I'll assume this popup box will be spawned from a link on a webpage, that it will open a popup box that will ask for a password. When submitted this will close the popup, submit the password to a php page, and alert the user if they get it wrong, all without changing the page the user was originally on.
Step 1)
On your HTML page you need to a build a div that looks the way you want your popup:
Step 2)
Then we need a link to display the popup:
Display Popup
Step 3)
Define css for the popup with a position of absolute.
(Can alter this css to style the popup any way you want, just
make sure it stays as position absolute)
Add this between the pages and tags.
Step 4)
Download the prototype javascript library and put it in the same
directory as the webpage (if you put it in a different directory
you'll need to update the link in step 5).
The website for prototype is:
http://www.prototypejs.org/
Download version 1.5.0 of the library, which is just a single
javascript file: prototype.js
Step 5)
Add a script tag to load the prototype library in your webpage.
To do this, insert the following line between the and
tags.
type="text/javascript">
Step 6)
Add a function to display the popup when the link is pressed.
Between tags in your header, add:
function displayPopup(e)
{
if ( window.innerWidth )
{
clientX = window.innerWidth;
clientY = window.innerHeight;
}
else
{
clientX = document.body.clientWidth;
clientY = document.body.clientHeight;
}
div = $("Popup");
divWidth = div.getWidth();
divHeight = div.getHeight();
div.style.left = clientX / 2 - divWidth / 2;
div.style.top = clientY / 2 - divHeight / 2;
Element.show("Popup");
if ( e && e.preventDefault )
{
e.preventDefault();
}
else
{
return false;
}
}
Step 7)
Add a function the check the password when the visitor
hits the submit button on the password form.
Again, between tags add:
function checkPassword(e)
{
$("PResponse").innerHTML = "";
passwordValue = $("Password").value;
if ( passwordValue.length < 5 )
{
$("PResponse").innerHTML = "Password must be 5 characters or more!";
}
else
{
new Ajax.Request(
'/checkpassword.php',
{
method: 'post',
parameters: {Password: passwordValue},
onSuccess: function(transport)
{
pResponse(transport);
},
onFailure: function()
{
alert('Their was a problem submitting your request.')
}
});
}
if ( e && e.preventDefault )
{
// Cancel form submission
// ( DOM Style, Firefox, etc. )
e.preventDefault();
}
else
{
// Return false, IE style
return false;
}
}
This uses the prototype library to submit the password to a php
file named "checkpassword.php" using Ajax.
Step 8)
Add a function to run when the php page returns it's result.
Between script tags add:
function pResponse(ajaxTransport)
{
var response = ajaxTransport.responseText;
$("PResponse").innerHTML = response;
}
Step 9)
Add a function to close the popup when the close popup link is clicked.
Between script tags add:
function closePopup(e)
{
Element.hide("Popup");
if ( e && e.preventDefault )
{
e.preventDefault();
}
else
{
return false;
}
}
Step 10)
Hide the popup when the page loads.
For your tag put:
Or add just the onLoad = "Element.hide("Popup");" to your
current body tag
Step 11)
Create a php page "checkPassword.php" that checks the password
submited to it, and returns a result.
As an example, create a file checkPassword.php with the following
code:
$password = isset($_POST['Password']) ? $_POST['Password'] : '';
if ( strlen($password) < 5 )
{
print "Password '$password' must be 5 or more characters";
}
else
{
// Logic for password here
if ( $password != 'testing' )
{
print "Password is not correct";
}
else
{
print "Password is correct!";
}
}
?>
If you have any questions let me know, this is tested and working.
It obviously leaves alot of details up to you, needs to be made
pretty and cleaned up.
2007-03-04 02:43:54
·
answer #2
·
answered by Dave W 1
·
0⤊
1⤋
