[Tutorial] Create Collapsable and Expandable Fixed jQuery Modal Box
Today I am going to write a tutorial on how to write a Jquery enabled Collapsable and Expandable Fixed jQuery Modal Box.
Q. What is jQuery ?
A. jQuery is a new type of Javascript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
reference : http://jquery.com (Official jQuery Homepage)
Here is the quick demo page for you to see our final product, that we are going to create from this tutorial.
First of all download the latest jquery pack from site Downlink Jquery Pack.
I have used the modal box from Simple jQuery Modal Window Tutorial and customized it, so that it becomes collapsable and Expandable Fixed jQuery Modal Box.
Therefore, before completing this tutorial, you might think on completing Simple jQuery Modal Window Tutorial first.
Lets get to the topic again,
**Strategy used in this jQuery Modal Box
- Search for tag with name=”modal”
- Set the mask to fill entire browser
- Finally display the dialog box that will lay over this mask.
See the screenshot below for complete reference.
At first our window is in state 2 i.e. Before Click, when an anchor inside dialog box 1 is clicked then the state changes to state 4, by Sliding Down. Then when again the link is clicked the state changes back to normal state by Sliding UP.
Dialog-Box is fixed at top by the use of CSS. CSS is controlled by the use of jQuery and jQuery click event is handled accordingly.
Save the below code in modalcss.css file. (Same as Simple jQuery Modal Window Tutorial with minor Changes)
Modalcss.css
@CHARSET "UTF-8";
/* Z-index of #mask must lower than #boxes .window */
#mask {
left: 0;
top: 0;
position: absolute;
z-index: 9000; /**Must be less than z-index of #boxes .window**/
background: #000;
display: none;
}
#boxes .window, #boxes #dialog {
/**-moz-border-radius:10%;**/
border:3px solid yellow;
color:#fff;
background:blue;
/**background-image:url('../images/background.gif');**/
background-repeat: no-repeat;
}
#boxes .window {
left: 0;
top: 0;
position: absolute;
width: 594px;
height: 384px;
display: none;
z-index: 9999;/**Must be greater than z-index of #mask**/
padding: 20px;
}
/* Customize your modal window here, you can add background image too*/
#boxes #dialog {
width : 234px;
height:138px;
padding: 10px;
}
/** End **/