{"id":3127,"date":"2017-11-22T09:59:09","date_gmt":"2017-11-22T14:59:09","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?p=3127"},"modified":"2025-05-21T14:44:58","modified_gmt":"2025-05-21T18:44:58","slug":"how-to-use-jquery-to-generate-modal-pop-up-when-clicked","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/","title":{"rendered":"Using jQuery to Generate Modal Pop-Up when Clicked"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">A modal box is a pop-up window that forces the user to interact with it before returning to the site. Modal boxes are useful for warnings, informational boxes, and more. You can create a modal box with jQuery. If you are not familiar with jQuery, check out our <a href=\"https:\/\/www.pair.com\/support\/kb\/jquery-basics\/\">jQuery Basics<\/a> article for an explanation of how jQuery works. <\/span><br \/>\n<iframe loading=\"lazy\" src=\"\/\/jsfiddle.net\/pairdocs\/yru9qe42\/7\/embedded\/\" width=\"100%\" height=\"300\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>This is an interactive code display that shows you the HTML, CSS, jQuery, and a demo of the output.<\/p>\n<h3>Modal HTML<\/h3>\n<p>In order to create a modal pop-up, you first need to establish the HTML structure.<\/p>\n<p>You need to create classes for the pop-up overlay and pop-up content so that you can edit them separately from the rest of the document.<\/p>\n<pre class=\"prettyprint\">&lt;!--Creates the popup body--&gt;\n<span style=\"color: #ff0000;\">&lt;div class=\"popup-overlay\"&gt;<\/span>\n&lt;!--Creates the popup content--&gt;\n<span style=\"color: #ff0000;\">&nbsp;&lt;div class=\"popup-content\"&gt;<\/span>\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Pop-Up&lt;\/h2&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt; This is an example pop-up that you can make using jQuery.&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&lt;!--popup's close button--&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"close\"&gt;Close&lt;\/button&gt; &nbsp;&nbsp; \n&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;h2&gt;jQuery Pop-Up Example&lt;\/h2&gt;\n&lt;button class=\"open\"&gt;Open&lt;\/button&gt;<\/pre>\n<p>This example creates the \u201cpopup-overlay\u201d and \u201cpopup-content\u201d classes to enable CSS to style it specifically.<\/p>\n<p>Take notice of the button elements in this example. We added buttons that we want to trigger the pop-up. One button has been given the class \u201copen,\u201d while the other has the class \u201cclose.\u201d These will be used later to open and close the pop-up.<\/p>\n<h3>Modal CSS<\/h3>\n<p>In the CSS, you must style the \u201cpopup-overlay\u201d and the \u201cpopup-content\u201d classes so that they are initially hidden. A pop-up wouldn\u2019t be a pop-up if it was visible from the very beginning. &nbsp;We can hide the pop-up by changing the classes\u2019 visibility:<\/p>\n<pre class=\"prettyprint\">.popup-overlay {\nvisibility:hidden;\n}\n\n.popup-content {\nvisibility:hidden;\n}<\/pre>\n    \t\t<div class=\"hts-messages hts-messages--alert   hts-messages--withicon \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tIf you named your classes differently, be sure to replace .popup-overlay and .popup-content with your class names.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t\n<p>Now, we don\u2019t want the pop-up to be hidden forever, so we need to make a special use case in the CSS for when the pop-up should be shown. We\u2019re going to use jQuery to help determine when the pop-up should be visible.<\/p>\n<p>jQuery has the ability add and remove classes based on actions (like clicking). So, if we program the jQuery to add a class called \u201cactive\u201d when the \u201copen\u201d button is clicked, we can use the \u201cactive\u201d class in CSS to show the pop-up. Append the \u201cactive\u201d class to the pop-up classes and create a new styling for when the pop-up is visible.<\/p>\n<p>See the example below to see how this CSS styling should look:<\/p>\n<pre class=\"prettyprint\">.popup-overlay.active{\nvisibility:visible;\n}\n\n.popup-content.active {\nvisibility:visible;\n}<\/pre>\n<h3>Modal jQuery<\/h3>\n<p>Now it\u2019s time to add the jQuery. Be sure to set up your HTML document for jQuery before adding any jQuery code. If you are unsure how to do so, see our <a href=\"https:\/\/www.pair.com\/support\/kb\/getting-your-html-ready-for-jquery\/\">Getting Your HTML Ready for jQuery<\/a> article.<\/p>\n<p>So when the \u201cOpen\u201d and \u201cClose\u201d HTML buttons are clicked, jQuery needs to add or remove the \u201cactive\u201d class.<\/p>\n<p>This first statement adds the \u201cactive\u201d class when the \u201cOpen\u201d button is clicked.<\/p>\n<pre class=\"prettyprint\">$(\".open\").on(\"click\", function(){\n$(\".popup, .popup-content\").addClass(\"active\");\n});<\/pre>\n<p>When this happens, the \u201cactive\u201d class is appended to the pop-up classes, thus changing the pop-up\u2019s visibility to \u201cvisible.\u201d In other words, the pop-up will appear.<\/p>\n<p>This second statement removes the \u201cactive\u201d class when the \u201cClose\u201d button is clicked.<\/p>\n<pre class=\"prettyprint\">$(\".close, .popup\").on(\"click\", function(){\n$(\".popup, .popup-content\").removeClass(\"active\");\n});<\/pre>\n<p>When this happens, the \u201cactive\u201d class is removed from the pop-up classes, causing them to revert to their previous styling that has the visibility set to hidden.<\/p>\n<p>Add both statements of jQuery to your document. If all this is completed correctly, you will have a rudimentary modal pop-up box.<\/p>\n    \t\t<div class=\"hts-messages hts-messages--info    \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tjQuery is an open-source software permissive under an MIT license. jQuery is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for jQuery. Please note that there are many levels of javascript libraries available. Please consult with your IT professional for advice and guidance on an appropriate library. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this tutorial for your convenience and is not responsible for jQuery's performance. Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.    \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t\n","protected":false},"excerpt":{"rendered":"<p>A modal box is a pop-up window that forces the user to interact with it before returning to the site. Modal boxes are useful for warnings, informational boxes, and more. You can create a modal box with jQuery. If you are not familiar with jQuery, check out our jQuery Basics&#8230;<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[32],"ht-kb-tag":[187],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery Modal Popup | jQuery Modal Example | jQuery Popup<\/title>\n<meta name=\"description\" content=\"A modal pop-up box forces the user to interact with it before returning to the site. Use jQuery to create modal information boxes, warnings, and more.\" \/>\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.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Modal Popup | jQuery Modal Example | jQuery Popup\" \/>\n<meta property=\"og:description\" content=\"A modal pop-up box forces the user to interact with it before returning to the site. Use jQuery to create modal information boxes, warnings, and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-21T18:44:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/\",\"name\":\"jQuery Modal Popup | jQuery Modal Example | jQuery Popup\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2017-11-22T14:59:09+00:00\",\"dateModified\":\"2025-05-21T18:44:58+00:00\",\"description\":\"A modal pop-up box forces the user to interact with it before returning to the site. Use jQuery to create modal information boxes, warnings, and more.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using jQuery to Generate Modal Pop-Up when Clicked\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Modal Popup | jQuery Modal Example | jQuery Popup","description":"A modal pop-up box forces the user to interact with it before returning to the site. Use jQuery to create modal information boxes, warnings, and more.","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.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Modal Popup | jQuery Modal Example | jQuery Popup","og_description":"A modal pop-up box forces the user to interact with it before returning to the site. Use jQuery to create modal information boxes, warnings, and more.","og_url":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2025-05-21T18:44:58+00:00","twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/","url":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/","name":"jQuery Modal Popup | jQuery Modal Example | jQuery Popup","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2017-11-22T14:59:09+00:00","dateModified":"2025-05-21T18:44:58+00:00","description":"A modal pop-up box forces the user to interact with it before returning to the site. Use jQuery to create modal information boxes, warnings, and more.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/how-to-use-jquery-to-generate-modal-pop-up-when-clicked\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"Using jQuery to Generate Modal Pop-Up when Clicked"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3127"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=3127"}],"version-history":[{"count":29,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3127\/revisions"}],"predecessor-version":[{"id":8524,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/3127\/revisions\/8524"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=3127"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=3127"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=3127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}