How to use the Jquery pop-up plugin ThickBox?

2 years ago
Noah Thompson
2 minutes

To use the jQuery popup plugin ThickBox, you need to follow these steps:

  1. First, download and include the jQuery library file and the ThickBox plugin file. These files can be downloaded from the official ThickBox website (https://jquery.com/) or GitHub.
  2. Add the necessary HTML structure to your HTML document. You’ll need to include a link that triggers a pop-up and a hidden pop-up container. For example:
<a href="#TB_inline?height=200&width=300&inlineId=myPopup" class="thickbox">Click to open popup</a>

<div id="myPopup" style="display:none;">
  <!-- 弹出层内容 -->
</div>

In the example above, the href attribute is a special ThickBox link that specifies the size of the popup and the ID of the content. The inlineId parameter specifies the ID of the popup container to be displayed.

  1. To initialize the ThickBox plugin in a JavaScript file, use the following code:
$(document).ready(function() {
  $('.thickbox').click(function() {
    $.fn.thickbox({ closeText: 'Close', closeCallback: function() {
      console.log('Popup closed');
    }});
  });
});

In the code above, the .thickbox class selector is used to select the links that trigger the pop-up layer. Calling the $.fn.thickbox() function sets the pop-up layer to its default configuration. You can also pass other options to customize the behavior and appearance of the pop-up layer.

  1. Finally, make sure your CSS file contains the style definitions for ThickBox. You can find these styles in the ThickBox plugin file.

When you click on the link to trigger the popup, the ThickBox plugin will display the popup and perform actions based on your configuration. You can add custom content and functionality within the popup.

bannerAds