{"id":19055,"date":"2024-03-15T18:08:10","date_gmt":"2024-03-15T18:08:10","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/"},"modified":"2024-03-21T14:47:11","modified_gmt":"2024-03-21T14:47:11","slug":"how-to-use-the-jquery-pop-up-plugin-thickbox","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/","title":{"rendered":"How to use the Jquery pop-up plugin ThickBox?"},"content":{"rendered":"<p>To use the jQuery popup plugin ThickBox, you need to follow these steps:<\/p>\n<ol>\n<li>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.<\/li>\n<li>Add the necessary HTML structure to your HTML document. You&#8217;ll need to include a link that triggers a pop-up and a hidden pop-up container. For example:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#TB_inline?height=200&amp;width=300&amp;inlineId=myPopup\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"thickbox\"<\/span>&gt;<\/span>Click to open popup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"myPopup\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"display:none;\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-comment\">&lt;!-- \u5f39\u51fa\u5c42\u5185\u5bb9 --&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>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.<\/p>\n<ol>\n<li>To initialize the ThickBox plugin in a JavaScript file, use the following code:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code>$(<span class=\"hljs-variable language_\">document<\/span>).<span class=\"hljs-title function_\">ready<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  $(<span class=\"hljs-string\">'.thickbox'<\/span>).<span class=\"hljs-title function_\">click<\/span>(<span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n    $.fn.<span class=\"hljs-title function_\">thickbox<\/span>({ <span class=\"hljs-attr\">closeText<\/span>: <span class=\"hljs-string\">'Close'<\/span>, <span class=\"hljs-attr\">closeCallback<\/span>: <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n      <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">'Popup closed'<\/span>);\r\n    }});\r\n  });\r\n});\r\n<\/code><\/pre>\n<p>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.<\/p>\n<ol>\n<li>Finally, make sure your CSS file contains the style definitions for ThickBox. You can find these styles in the ThickBox plugin file.<\/li>\n<\/ol>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To use the jQuery popup plugin ThickBox, you need to follow these steps: 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. Add the necessary HTML structure to your HTML document. You&#8217;ll need to include a link that [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-19055","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use the Jquery pop-up plugin ThickBox? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use the Jquery pop-up plugin ThickBox?\" \/>\n<meta property=\"og:description\" content=\"To use the jQuery popup plugin ThickBox, you need to follow these steps: 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. Add the necessary HTML structure to your HTML document. You&#8217;ll need to include a link that [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T18:08:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T14:47:11+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"How to use the Jquery pop-up plugin ThickBox?\",\"datePublished\":\"2024-03-15T18:08:10+00:00\",\"dateModified\":\"2024-03-21T14:47:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/\"},\"wordCount\":231,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/\",\"name\":\"How to use the Jquery pop-up plugin ThickBox? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T18:08:10+00:00\",\"dateModified\":\"2024-03-21T14:47:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use the Jquery pop-up plugin ThickBox?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to use the Jquery pop-up plugin ThickBox? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/","og_locale":"en_US","og_type":"article","og_title":"How to use the Jquery pop-up plugin ThickBox?","og_description":"To use the jQuery popup plugin ThickBox, you need to follow these steps: 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. Add the necessary HTML structure to your HTML document. You&#8217;ll need to include a link that [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T18:08:10+00:00","article_modified_time":"2024-03-21T14:47:11+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"How to use the Jquery pop-up plugin ThickBox?","datePublished":"2024-03-15T18:08:10+00:00","dateModified":"2024-03-21T14:47:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/"},"wordCount":231,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/","name":"How to use the Jquery pop-up plugin ThickBox? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T18:08:10+00:00","dateModified":"2024-03-21T14:47:11+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-the-jquery-pop-up-plugin-thickbox\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use the Jquery pop-up plugin ThickBox?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/19055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=19055"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/19055\/revisions"}],"predecessor-version":[{"id":52775,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/19055\/revisions\/52775"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=19055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=19055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=19055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}