Create a Modal Dialog Using CSS and Javascript

The code behind this effect is surprisingly simple. There are three pieces involved:

* A

containing the content you want to appear when the modal area is activated.
* Two CSS rules which keep the layer hidden until needed and then “fullscreen” when activated.
* Javascript which hides and shows the

.

The overlay

At the bottom of your HTML, create a

with id = “overlay”. Any content placed inside this area will initially be hidden by the browser and then shown modally when activated. Any content beneath it will be “unclickable” by the user, which forces them to interact with whatever message you give them.

Inside #overlay I usually place another

which I center horizontally and apply a few styles to create a dialog box appearance. It’s this second

that actually contains the content I’m showing the user.

Content you want the user to see goes here.

The CSS

There’s only one CSS rule to take care of the fullscreen/hiding for #overlay.

#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}

You can style the inner

however you like. As I said above, I usually center it horizontally to give it more of a dialog box look and feel.

#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}

The Javascript

The javascript that controls everything is insanely simple. Just add the following function to wherever you’re storing your javascript. (That could be in the of your document or in an external .js file.)

function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

The javascript grabs our overlay element and then toggles its visibility property. If it’s hidden, it makes it visible and vice versa. You could create a function to explicitly show or hide the layer, but I prefer this automatic toggle method since it requires less code.

With the function in place, we then call it whenever we want to show the overlay and then again to hide it. So, somewhere on our page we could add

Click here to show the overlay

When the user clicks on the link our javascript will show the overlay.

Within the overlay’s HTML, we need to add a link to hide it. The code is exactly the same:

Click here to [close]

Finishing Touches

Combining all the pieces together we can create a simple example. (View the source to see everything put together.)

However, when the user clicks the link to show the overlay, they may become confused since it looks like they can still click on any element in the page. To help them understand what’s going on, we can apply a background image to the overlay

. In Photoshop I create a simple checkerboard pattern .gif with transparency. This creates a shaded effect so the user can still see the underlying web page but know not to click on it. To add the background to the layer, add the following to our CSS.

#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-image:url(overlay.gif);
}

And finally, (as always) we need to add a small tweak so that this works in Internet Explorer. Fortunately, it’s quick fix. Add this to your CSS.

body {
height:100%;
margin:0;
padding:0;
}

In order for an element to have a percentage height applied to it (which #overlay does), IE requires the parent element to have a height. So, just set body’s height to 100% and zero the margins and we’re all set! You can see the finished product here.

Tuesday, November 20, 2007

Javascript Email validator

/
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
/* International Phone Validator */
// Declaring required variables
var digits = "0123456789";
// non-digit characters which are allowed in phone numbers
var phoneNumberDelimiters = "()- ";
// characters which are allowed in international phone numbers
// (a leading + is OK)
var validWorldPhoneChars = phoneNumberDelimiters + "+";
// Minimum no of digits in an international phone no.
var minDigitsInIPhoneNumber = 10;

function isInteger(s)
{ var i;
for (i = 0; i < s.length; i++)
{
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}

function stripCharsInBag(s, bag)
{ var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++)
{
// Check that current character isn't whitespace.
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}

function checkInternationalPhone(strPhone){
s=stripCharsInBag(strPhone,validWorldPhoneChars);
return (isInteger(s) && s.length >= minDigitsInIPhoneNumber);
}
////////////////////////////////
function validate(thisform)
{
with (thisform)
{
if (validate_required(name,"Please Enter Your Name!")==false)
{name.focus();return false}
else if (validate_required(email,"Please Enter Your Email!")==false)
{email.focus();return false}
else if (validate_email(email,"Invalid Email Address!")==false)
{email.focus();return false}
else if (validate_required(phone,"Please Enter Your Phone Number")==false)
{phone.focus();return false}
else if (checkInternationalPhone(phone.value)==false){
alert("Please Enter a Valid Phone Number")
phone.value=""
phone.focus()
return false
}
else if (validate_required(request,"Please Enter Your Request")==false)
{request.focus();return false}
}
}


In form:-

OnSubmit / OnClick validate(this);

Wednesday, September 5, 2007

Who to send mail using PHP?

mail — Send mail

Description
bool mail ( string $to, string $subject, string $message [, string $additional_headers [, string $additional_parameters]] )

Sends an email.

Parameters

to
Receiver, or receivers of the mail.

The formatting of this string must comply with » RFC 2822. Some examples are:

user@example.com
user@example.com, anotheruser@example.com
User
User , Another User


subject
Subject of the email to be sent.

Caution
This must not contain any newline characters, or the mail may not be sent properly.


message
Message to be sent.

Each line should be separated with a LF (\n). Lines should not be larger than 70 characters.

Caution
(Windows only) When PHP is talking to a SMTP server directly, if a full stop is found on the start of a line, it is removed. To counter-act this, replace these occurrences with a double dot. $text = str_replace("\n.", "\n..", $text);
?>


additional_headers (optional)
String to be inserted at the end of the email header.

This is typically used to add extra headers (From, Cc, and Bcc). Multiple extra headers should be separated with a CRLF (\r\n).

Note: When sending mail, the mail must contain a From header. This can be set with the additional_headers parameter, or a default can be set in php.ini.

Failing to do this will result in an error message similar to Warning: mail(): "sendmail_from" not set in php.ini or custom "From:" header missing. The From header sets also Return-Path under Windows.

Note: If messages are not received, try using a LF (\n) only. Some poor quality Unix mail transfer agents replace LF by CRLF automatically (which leads to doubling CR if CRLF is used). This should be a last resort, as it does not comply with » RFC 2822.

additional_parameters (optional)
The additional_parameters parameter can be used to pass an additional parameter to the program configured to use when sending mail using the sendmail_path configuration setting. For example, this can be used to set the envelope sender address when using sendmail with the -f sendmail option.

The user that the webserver runs as should be added as a trusted user to the sendmail configuration to prevent a 'X-Warning' header from being added to the message when the envelope sender (-f) is set using this method. For sendmail users, this file is /etc/mail/trusted-users.


Return Values
Returns TRUE if the mail was successfully accepted for delivery, FALSE otherwise.

It is important to note that just because the mail was accepted for delivery, it does NOT mean the mail will actually reach the intended destination.

What is PHP?

PHP (recursive acronym for "PHP: Hypertext Preprocessor") is a widely-used Open Source general-purpose scripting language that is especially suited for Web development and can be embedded into HTML.
Simple answer, but what does that mean? An example:

Example 1.1. An introductory example

Subscribe to: Posts (Atom)