Recently I found a good jquery-based plug-in thickBox, which is better than facebox. But jquery is not officially recommended. Therefore, this is just a learning friend and is not recommended. You can use several plug-ins officially recommended.
The Code is as follows:
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
* Colorbox
* JQueryUI Dialog
* Fancybox
* DOM window
* Shadowbox. js
During the project, it is found that if facebox is clicked twice quickly, a black screen may easily appear. In addition, the facebox framework is written in table, probably because the table is more stable than p in terms of structure. If the layout of the table is in the pop-up layer, the style will be affected by the facebox style, and you have to reset it again.
After reading the official api, I studied it and sorted it out. See:
In the attachment, index.html is the home page, and other pages are called pages. Click the index page to view the page. Graphs, buttons, and text can all be clicked. Class = "thickbox" must be added to all tags to be clicked ". When a scroll bar appears on the page, the pop-up layer will not move in the middle of the window. When the pop-up layer only contains images, the image size is compressed according to the current window size. All pop-up layers can exit by pressing "esc". In addition to the pop-up layer that requires confirmation, you can close the pop-up layer by clicking the pop-up layer.
1. Image Display (single ):
The Code is as follows:
2. display images (multiple images ):
The Code is as follows:
The rel attribute must be added for each a, and the attribute value must be the same. You can switch between the front and back charts through ">" and "<".
3. When the pop-up layer content is on the current page:
The Code is as follows:
The paragraph and input below in a ThickBox, or
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.
Test
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.
The pop-up layer opened by the first input Point contains the input box, title, operation button, and text. The pop-up layer opened by the second input point only contains text.
The size of the pop-up layer is defined based on the width and height values in the alt attribute of input. The following situations also define the size of the pop-up layer.
4. Call the external file. The pop-up layer is iframe.
The Code is as follows:
Example 1
Example 2
Open iFrame Modal
If the pop-up layer is nested in iframe, you need to add "TB_iframe = true ".
The first is to call the ajaxFrame. php file.
The second is to call the ajaxoverflow2.html file.
Third, the iframemodal.html file is used to hide the title and operation buttons.
5. Call external files. The pop-up layer is not an iframe
The Code is as follows:
Scrolling content
No-scroll content
Login (modal)
Update ThickBox content
The first method is to call the ajaxoverflow.html file.
The second is to call the ajax. php file.
The third method is to use the ajaxlogin.html file and form.
The fourth request is to use the ajaxtbcontent.html file, and then the newtbcontent.html file.
