Many solutions for implementing modal boxes can be found on the Internet, but most of them need to introduce JavaScript libraries such as jquery, mootools, dojo, and Yui. It would not be worth the candle if we only want to introduce a large class library to implement the modal box. Here we provide you with a lightweight modal box solution tinybox implemented using JavaScript.
A modal box pops up a subwindow on the current page. If the subwindow is not closed, the parent window function cannot be operated.
Let's take a look at the online example of this solution:Online browsing example
Author's homepage (author website ):Http://www.leigeber.com
Tinybox features:
- Tinybox is an independent modal box script, which does not need to be introduced into other script libraries.
- Tinybox is a lightweight modal box script with a compressed version of only 3.5 kb.
- The pop-up modal box can call HTML content or call other pages through Ajax.
- You can call this operation to display images.
- The modal box is automatically closed after a certain period of time.
- Determines whether to enable the load loading flag when the modal box is opened.
- The size of the modal box can be controlled, or the adaptive size can be selected based on the content of the modal box
- You can use simple CSS to control the modal box style.
- This script is successfully tested in Firefox 2/3, ie 6/7/8, opera, Safari and chrome.
How to Use tinybox:
- The first step is to introduce the tinybox script file and style first.
- Use the following statement to call the modal box:
Tiny.box.show('advanced.html ', 1,300,150, 1, 3)
- Tiny. Box. Show parameter explanation:
The first advanced.html is to call the content. If Ajax calls a page, the relative path of the page is written; If HTML content is called, the JavaScript Object is input;
The second parameter 1 is used to identify whether the page is called through Ajax. The value is 1 and the value is 0;
The third parameter is 300, which is used to control the window width of the pop-up modal box. If the value is 0, the parameter is auto-adaptive;
The fourth parameter is 150, which is used to control the window height of the pop-up modal box. If 0 is used, auto Auto Adaptive is used;
The fifth parameter 1 is used to control whether the loading ID is displayed. 1 is enabled, and 0 is not enabled;
Parameter 6 3: The modal box window is automatically closed after three seconds of identification. this parameter is optional. If this parameter is not set, it is not automatically closed.
Other Instructions:
- Source of this solution:SourceIf you have any questions, contact the author on the source homepage, or leave a message on this page for discussion.
- The author said that new features will be introduced in the next version, and we look forward to them together.
Download sample source code:Lightweight modal box solution implemented by JavaScript[Size: 38.32 KB-downloads: 178]
