Critical Developers

Programmers Knowledge Base

Simple Overlay/Modal Box Using Div,CSS,Javascript

Simple Overlay/Modal Box Using Div,CSS,Javascript


/*--- script in <head></head> section ------*/

<script type="text/javascript">
            function modal() {
                bx = document.getElementById("modal");
                bx.style.visibility = (bx.style.visibility == "visible") ? "hidden" : "visible";
            }
    </script>

/*-- script end ------*/



/*-----Overlay CSS ------*/

#modal
{
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
   height: 100%;
    text-align: center;
    z-index: 1000;
    /*background-color: #000000;*/
}

#modal div
{
    width: 336px;
    margin: 100px auto;
    background-color: #FFFFCC;
    border: 2px solid #FF9933;
    padding: 0px;
    text-align: left;
    overflow: hidden;
     border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
/*-----End CSS --------*/





/*------- htmlization -----*/

<a href="#" onclick='modal()'>Click to Open</a>

<div id="modal">     /*------- you can give background-color -----*/
    <div>              /*------- content div ------------*/

         <table cellpadding="0" cellspacing="0" width="100%" style="width:100%; background-color:#ff9933; color:#ffffff; font-weight:bold;">
         <tr>
         <td width="50%" align="left" valign="middle" height="30px" style="padding-left:3px;">Manage Box</td>
         <td width="50%" align="right" valign="middle" height="30px" style="padding-right:3px;">[<a href='#' onclick='modal()' style="text-decoration:none;color:#ffffff;">X</a>]</td>
         </tr>
         </table>
         <p>Contents:-Images/Text etc</p>

     </div>
</div>




/*------ htmlization end -----*/

Interfaces VS Abstract Classes

Interfaces VS Abstract Classes
______________________________

First, what are interfaces?

    Interfaces are 100% abstract classes – they have methods but the methods have no ‘guts’.
    Interfaces cannot be instantiated – they are a construct in OOP that allows you to inject ‘qualities’ into classes .. like abstract classes.
    Where an abstract class can have both empty and working/concrete methods, interface methods must all be shells – that is to say, it must be left to the class (using the interface) to flesh out the methods.

Example of a class:
class dog {

function bark() {
echo “yap, yap, yap …”;
}

}

Example of an interface:
interface animal {
function breath();
function eat();
}