I am Victor Santafé, a 24 years old guy currently living and working in Colombia. I am a System Engineer, I love my profession, I love everything about Software Engineering and Programming Languages, I love music, photography and everything related to arts.
Subscribe to feed
Launch A Content Box!
Developed by Victor Santafé
Inspired by MoodalBox
Released under MIT License
Something simple for your scripts. Launch A Content Box (LACB) can help you if you need to create content boxes directly from your javascript source using DOM or if you have any other kind of created element you need to show when any event occurs.
Why did I develop a new modal window manager script? because I was asking for a “loading” box in the center of the screen to indicate user that something had being processed in the server and should wait for it to continue, besides I wanted to create boxes as needed, I mean whenever I wanted and directly from source. I decided to develop my own script, when done I discovered it could be something else, so with LACB you can launch whatever you want and a “Loading Box” too.
Developed by a fanatic of simple but functional scripts, I hope it helps you too.
How it works
LACB was created as a class which makes it an easy-to-manage script and allow avoiding reference problems.
The options to initialize a new object are below:
| Option | Purpose | Default value | |
|---|---|---|---|
| initialWidth | determines the width of the container | 95 | |
| initialHeight | determines the height of the container | 42 | |
| screenProportion | determines a vertical screen proportion to position the container | 2.1 | |
| contentText | determines the text to show in the “loading box” |
“Loading…” | |
| closeText | determines the text to show in the “close link” |
“close” | |
| content | gets the reference to the object to show | The “Loading Box” DOM object which is created during the excecution of script | |
| showCloseLink | determines whether to show a close link on the top of content box or not | false | |
| closeOnClick | determines whether to close the modal window when clicking or not |
false |
The functions you have to know:
| Function | Purpose |
|---|---|
| close() | Closes the modal window, you can invoque it from the objects you create to close single modal windows |
About the css file:
| Class | Purpose |
|---|---|
| #lacb_loadingbox_overlay | The overlay’s (black screen) style |
| #lacb_content | The “Loading Box”‘s container’s style (or your own content) |
| #lacb_loading_box | The “Loading Box”‘s style |
| #lacb_loading_box_close | The “Close link”‘s style |
You have to include the js and the CSS file (see download section)
Let’s see some examples:
Go to download section to download examples file.
(LACB default content).————————————————————–
:The box will disappear but object will be still available (just click many times,
you will see).
What a nice box is this!
————————————————————–
Another example, but this time it will use some other options (div is hidden):
Pachitas’s Boyfriend. from Download
Launch A Content Box needs files below:
Launch A Contentbox 1.0 (source + css + example)
Enjoy!
Category: Projects | Tags: Code, Javascript, Mootools, Project, Source One comment »
One Response to “Launch A Content Box!”
Leave a Reply
March 29th, 2009 at 3:21 pm
Nice script. But when the modal is opened, if page is scrolled the message gets out of the visual area and it looks a little weird. Other than that, it looks good. Nice job.