How to use Jquery pop-up layer plug-in ThickBox_jquery

Thickbox is a plug-in for jQuery. Its function is to pop up dialog boxes and web page boxes to make the user experience more pleasant. Here is a brief introduction to its usage.
Disclaimer: This is just a personal summary record.
Preparation work: You need three files: thickbox.js, thickbox.css, jquery.js, which can be downloaded from anywhere online

Specific use:

Step one: Introduce these three files to the page where you want to use thickbox

Copy code The code is as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />

The second step: Generally simple use is to add styles to the <a> label and Button: class=thickbox
There is also the thickbox function call: such as tb_init(), tb_show(); see below.

Several different uses:

1. Click to display the picture:

<a href="001.jpg" class="thickbox"><img src="001.jpg"/></a>
ok, that’s it
2. Click the button or link:

Copy code The code is as follows:

<input alt="#TB_inline?height=300&width=400&inlineId=div1" title="shawnliu" class="thickbox" type="button" value="Show" />
<a href="#TB_inline?height=155&width=300&inlineId=div2&modal=true" class="thickbox">Show hidden modal content.</a>

<div id="div1" style="display:none">
<P>
This is a modeless dialog box.
</P>
</div>

<div id="div2" style="display:none">
<P>
This is a modal dialog box.
<p style="TEXT-ALIGN: center"><INPUT id="Login" onclick="tb_remove()" type="submit" value=" Ok " /></p>
</P>
</div>

Instructions: Add "#TB_inline?height=300&width=400&" to the <a> or button you want to use thickbox. #TB_inline is a fixed usage of thickbox. Height and width are the size parameters for displaying the pop-up dialog box. InlineId is For the label or component you want to display, modal is the choice between mode and non-modal. Of course, you can also accept many customized parameters
3. Generally, the page that is used more often in projects is the page that loads the form. For example, adding and editing are on the same list page. At this time, we can make both adding and editing into thickbox form, as shown below:

How to do it is the same, add thickbox style to the added link:

<a href="add.shtml?width=300&height=250" class="thickbox">Add</a>
The premise is that you have to prepare the page you want to display (add.shtml), and then specify the size you want to display
Editing is the same: extract the original information first, and then let the user modify it:

The same code:

Copy code The code is as follows:

<a href="edit.shtml?width=300&height=250&nid=item.nid" class="thickbox">Edit</a>

4. You can locate elements that require thickbox by yourself. Instead of using styles, you can use functions, such as:

Copy code The code is as follows:

<div id="PicList">
<a href="Pic01.jpg"><img src="Pic01s.jpg" border="0"/></a>
<a href="Pic02.jpg"><img src="Pic01s.jpg" border="0"/></a>
</div>

$(function() {
tb_init("#PicList a[img]");});

5. For pages loaded through ajax, the thickbox style will be invalid. Solution:
Just execute the following code after AJAX loads the HTML and updates it to the page:

tb_init('.thickbox');
6. Custom function call:
If you click on the thumbnail, to display the large image, the thumbnail URL just adds s:

before the suffix of the large image URL.

Copy code The code is as follows:

<div id="PicList">
<img src="Pic01s.jpg" border="0"/>
<img src="Pic01s.jpg" border="0"/>
</div>

$(function() {
$("#PicList img").click(function() {
tb_show("",this.src.substring(0,this.src.length-5) '.jpg',false);
});});

In addition, if you want to use other events, you can also change click to the event you want to trigger the thickbox.

THICKBOX supports the following browsers:
Windows IE 6.0, Windows IE 7, Windows FF 2.0.0.6, Windows Opera 9.0, Macintosh Safari 2.0.4, Macintosh FF 2.0.0.6, Macintosh Opera 9.10... But according to my experience, IE6 still has some problems!