Published: 2009-01-13 Keywords: thickbox
reference collections
related articles:
* In some useful tools online collection
* "questions" struts validation fails, when forwarding, url error?
* About form validation code share
recommend circle: the Office of the Permanent JE Mars
more recommended
recently found a nice jquery-based plug-thickBox, feel easy to use than facebox.
To do the project if found facebox quickly click twice, prone to black. Facebox frame and table is written, probably because the table structure div relatively more stable. If there is a pop-up layer table layout, style, it would be the impact facebox style, but also to re-reset it.
Looked under official api, I studied under, made a sort. Look:
Annex index.html is the home page, other pages are calling page. Click on the index page, you can see in Figure page. Map, buttons, text can all be points. Need to click on the label should add class = "thickbox". When a scroll bar appears pages, the pop-up layer is fixed in the middle does not move the window. When the pop-up layer only when images are compressed image size according to the size of the current window. All of the popup can press "esc" exits, in addition to need some confirmation of the popup, click outside the pop-up layer of places you can turn off the popup.
1. Show pictures (single):
Html Code
1. <a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
2. <img src="images/single.jpg" alt="Plant" width="100" height="75" />
3. </a>
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
<img src="images/single.jpg" alt="Plant" width="100" height="75" />
</a>
2.展示图片（多张）：
Html代码
1. <a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
2. <img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/>
3. </a>
4. <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
5. <img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/>
6. </a>
7. <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
8. <img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/>
9. </a>
10. <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
11. <img src="images/plant4.jpg" alt="Plant 4" width="100" height="75"/>
12. </a>
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/>
</a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/>
</a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/>
</a>
A href="images/plant4.jpg" title="add Caption to <a title attribute / or Leave blank" class="thickbox" rel="flowers">
<IMG the src = "Images / plant4.jpg" Alt = " . 4 Plant "width =" 100 "height =" 75 "/>
</a>
where each should be added a rel attribute, and attribute values should be the same. Before and after the display of FIG. By ">" and "<" to switch
3 layer content pop up when the current page:
the Html Code
1. <input alt = "? # TB_inline height = 150 & width = 400 & inlineId = myOnPageContent" title = "add a title attribute to Caption / or Leave blank "class =" ThickBox "value =" the Show "type =" Button ">
2. The INPUT below in paragraph A and a ThickBox, or
3. <input alt = "TB_inline? Height = 155 width = 300 & inlineId = hiddenModalContent and modal = true" title = "Add a caption to title attribute / or leave blank" class = "thickbox" value = "Show hidden modal content" type = " button ">
4. <div id =" myOnPageContent "style =" display: none; ">
5. <p> lorem ipsum carrots, improve undergraduate developer, offset sed nibh euismod laoreet was a great weekend. To thank you for coming, who nostrud exercise tation ullamcorper players to receive the carton aliquip advantage from it. </ P>
6 <p> <select name = ""> <option> test </ option> </ select> </ p>
7. <
9. <p> lorem ipsum carrots, improve undergraduate developer, offset sed nibh euismod laoreet was a great weekend. To thank you for coming, who nostrud exercise tation ullamcorper players to receive the carton aliquip advantage from it. </ P>
10 <p> <input type = "submit" onclick = "tb_remove ()" value = "OK" id = "login" /> </ p>
11 </ dIV>
<input alt = "TB_inline? height = 150 & width = 400 & inlineId = myOnPageContent" title = "Add a caption to title attribute / or leave blank" class = " thickbox "value =" show "type =" button ">
the paragraph and input below on a thickbox, or
<input alt = "TB_inline? height = 155 width = 300 & inlineId = hiddenModalContent and modal = true" title = "Add a caption to title attribute / or leave blank" class = "thickbox" value = "Show hidden modal content" type = "button" >
<div id = "myOnPageContent" style = "display: none;">
<p> lorem ipsum carrots, improve undergraduate developer, offset sed nibh euismod laoreet was a great weekend. To thank you for coming, who nostrud exercise tation ullamcorper suscipit lobortis nisl ut aliquip advantage from it. </ P>
<p> <select name = ""> <option> test </ option> </ select> </ p>
</ div>
<div id = "
<p> Lorem ipsum dolor sit amet , consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. < / P>
<P> <input type = "Submit" the onclick = "tb_remove ()" value = "Ok" ID = "the Login" /> </ P>
</ div>
first input point apart popup to input frame, title, and the operation buttons and text. The second input point to open the pop-up text layer only.
Popup layer is input in accordance with the alt attribute's width and height values defined. The following are mentioned several cases this layer to define the size of the pop-up.
4. Call the external file, the popup is iframes
the Html Code
1. <a href = "ajaxFrame.PHP? KeepThis = true & TB_iframe = true & height = 250 & width = 400" title = "
2. <a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
3. <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
<a href="ajaxFrame.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>
<a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox"> Open iFrame Modal </a>
If pop layer is nested within an iframe where you need to add "TB_iframe = true".
The first is to call ajaxFrame.PHP file.
The second is to call ajaxOverFlow2.html file.
The third is called iframeModal.html files, hidden title and action buttons.
5. Call external file, the popup is not iframes
the Html Code
1. <a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox"> Scrolling </a> Content
2. <A the href = "ajax.php? & width = 220 height = 400" class = "ThickBox" title = "
3. <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
4. <a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
<a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
The first call ajaxOverFlow.html file.
The second call ajax.PHP file.
The third call ajaxLogin.html files, form form.
The fourth call ajaxTBcontent.html file, and then call the popup in newTBcontent.html file.
* [Click to view original size picture]
* Size: 99.5 KB
* demo.zip (1.1 MB)
* Downloads: 339
* demo_jquery1.3_.zip (1.1 MB)
* Downloads: 206
* View Image Attachment
statement: JavaEye Articles copyright belongs to the author, are protected by law. No author written permission shall not be reproduced.
Recommended links
* taobao, win in Taobao
* [November] recommended JAVA technology salon notification - welcome and look forward to your participation!
reference collections
related articles:
* In some useful tools online collection
* "questions" struts validation fails, when forwarding, url error?
* About form validation code share
recommend circle: the Office of the Permanent JE Mars
more recommended
recently found a nice jquery-based plug-thickBox, feel easy to use than facebox.
To do the project if found facebox quickly click twice, prone to black. Facebox frame and table is written, probably because the table structure div relatively more stable. If there is a pop-up layer table layout, style, it would be the impact facebox style, but also to re-reset it.
Looked under official api, I studied under, made a sort. Look:
Annex index.html is the home page, other pages are calling page. Click on the index page, you can see in Figure page. Map, buttons, text can all be points. Need to click on the label should add class = "thickbox". When a scroll bar appears pages, the pop-up layer is fixed in the middle does not move the window. When the pop-up layer only when images are compressed image size according to the size of the current window. All of the popup can press "esc" exits, in addition to need some confirmation of the popup, click outside the pop-up layer of places you can turn off the popup.
1. Show pictures (single):
Html Code
1. <a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
2. <img src="images/single.jpg" alt="Plant" width="100" height="75" />
3. </a>
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
<img src="images/single.jpg" alt="Plant" width="100" height="75" />
</a>
2.展示图片（多张）：
Html代码
1. <a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
2. <img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/>
3. </a>
4. <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
5. <img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/>
6. </a>
7. <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
8. <img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/>
9. </a>
10. <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
11. <img src="images/plant4.jpg" alt="Plant 4" width="100" height="75"/>
12. </a>
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/>
</a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/>
</a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers">
<img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/>
</a>
A href="images/plant4.jpg" title="add Caption to <a title attribute / or Leave blank" class="thickbox" rel="flowers">
<IMG the src = "Images / plant4.jpg" Alt = " . 4 Plant "width =" 100 "height =" 75 "/>
</a>
where each should be added a rel attribute, and attribute values should be the same. Before and after the display of FIG. By ">" and "<" to switch
3 layer content pop up when the current page:
the Html Code
1. <input alt = "? # TB_inline height = 150 & width = 400 & inlineId = myOnPageContent" title = "add a title attribute to Caption / or Leave blank "class =" ThickBox "value =" the Show "type =" Button ">
2. The INPUT below in paragraph A and a ThickBox, or
3. <input alt = "TB_inline? Height = 155 width = 300 & inlineId = hiddenModalContent and modal = true" title = "Add a caption to title attribute / or leave blank" class = "thickbox" value = "Show hidden modal content" type = " button ">
4. <div id =" myOnPageContent "style =" display: none; ">
5. <p> lorem ipsum carrots, improve undergraduate developer, offset sed nibh euismod laoreet was a great weekend. To thank you for coming, who nostrud exercise tation ullamcorper players to receive the carton aliquip advantage from it. </ P>
6 <p> <select name = ""> <option> test </ option> </ select> </ p>
7. <
9. <p> lorem ipsum carrots, improve undergraduate developer, offset sed nibh euismod laoreet was a great weekend. To thank you for coming, who nostrud exercise tation ullamcorper players to receive the carton aliquip advantage from it. </ P>
10 <p> <input type = "submit" onclick = "tb_remove ()" value = "OK" id = "login" /> </ p>
11 </ dIV>
<input alt = "TB_inline? height = 150 & width = 400 & inlineId = myOnPageContent" title = "Add a caption to title attribute / or leave blank" class = " thickbox "value =" show "type =" button ">
the paragraph and input below on a thickbox, or
<input alt = "TB_inline? height = 155 width = 300 & inlineId = hiddenModalContent and modal = true" title = "Add a caption to title attribute / or leave blank" class = "thickbox" value = "Show hidden modal content" type = "button" >
<div id = "myOnPageContent" style = "display: none;">
<p> lorem ipsum carrots, improve undergraduate developer, offset sed nibh euismod laoreet was a great weekend. To thank you for coming, who nostrud exercise tation ullamcorper suscipit lobortis nisl ut aliquip advantage from it. </ P>
<p> <select name = ""> <option> test </ option> </ select> </ p>
</ div>
<div id = "
<p> Lorem ipsum dolor sit amet , consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. < / P>
<P> <input type = "Submit" the onclick = "tb_remove ()" value = "Ok" ID = "the Login" /> </ P>
</ div>
first input point apart popup to input frame, title, and the operation buttons and text. The second input point to open the pop-up text layer only.
Popup layer is input in accordance with the alt attribute's width and height values defined. The following are mentioned several cases this layer to define the size of the pop-up.
4. Call the external file, the popup is iframes
the Html Code
1. <a href = "ajaxFrame.PHP? KeepThis = true & TB_iframe = true & height = 250 & width = 400" title = "
2. <a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
3. <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
<a href="ajaxFrame.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>
<a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox"> Open iFrame Modal </a>
If pop layer is nested within an iframe where you need to add "TB_iframe = true".
The first is to call ajaxFrame.PHP file.
The second is to call ajaxOverFlow2.html file.
The third is called iframeModal.html files, hidden title and action buttons.
5. Call external file, the popup is not iframes
the Html Code
1. <a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox"> Scrolling </a> Content
2. <A the href = "ajax.php? & width = 220 height = 400" class = "ThickBox" title = "
3. <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
4. <a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
<a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
The first call ajaxOverFlow.html file.
The second call ajax.PHP file.
The third call ajaxLogin.html files, form form.
The fourth call ajaxTBcontent.html file, and then call the popup in newTBcontent.html file.
* [Click to view original size picture]
* Size: 99.5 KB
* demo.zip (1.1 MB)
* Downloads: 339
* demo_jquery1.3_.zip (1.1 MB)
* Downloads: 206
* View Image Attachment
statement: JavaEye Articles copyright belongs to the author, are protected by law. No author written permission shall not be reproduced.
Recommended links
* taobao, win in Taobao
* [November] recommended JAVA technology salon notification - welcome and look forward to your participation!
Reproduced in: https: //www.cnblogs.com/jastbelove/archive/2009/11/06/thickbox.html