{"id":16656,"date":"2013-03-13T21:01:05","date_gmt":"2013-03-13T13:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16656"},"modified":"2025-04-04T01:30:21","modified_gmt":"2025-04-03T17:30:21","slug":"bootstrap-plugin-modal-window","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/","title":{"rendered":"Working with Bootstrap Plugin: Modal Window"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/bootstrap\/\">Bootstrap<\/a> has gained a lot popularity among web designers and developers, in this site <a href=\"https:\/\/builtwithbootstrap.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">BuiltWithBootstrap<\/a> you can see that there are many sites that have adopted Bootstrap as the foundation of their website or webapps.<\/p>\n<p>In our <a href=\"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/\">previous post<\/a> we walked through some <strong>UI Components in Bootstrap<\/strong>. This time, in this post we are going to explore, Bootstrap Plugins.<\/p>\n<p>As we mentioned before, Bootstrap comes with a number of custom jQuery plugins that work seamlessly with each other. So, we don\u2019t have to rely on third-party plugins which may have script clashes.<\/p>\n<p>In this post we are going to explore the following plugin that attracts me most: <strong>Modal Window<\/strong>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/izimodal-js\/\" class=\"ref-block__link\" title=\"Read More: iziModal.js \u2013 A Truly Dynamic Modal Window jQuery Plugin\" rel=\"bookmark\"><span class=\"screen-reader-text\">iziModal.js \u2013 A Truly Dynamic Modal Window jQuery Plugin<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/izimodal-js.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-29535 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/izimodal-js.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">iziModal.js \u2013 A Truly Dynamic Modal Window jQuery Plugin<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tMost modal windows seem to distract and annoy the visitor with opt-in fields and unwanted deals. These modals...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Setting Up The Document<\/h2>\n<p>Before we can run these plugins, make sure that all the necessary files have been included in our document, as follows:<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\" href=\"css\/bootstrap.css\"&gt;\r\n&lt;script src=\"js\/jquery.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\t\r\n&lt;script src=\"js\/bootstrap.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Since it is a jQuery plugin, don\u2019t forget to also include the jQuery library, otherwise it won\u2019t work. If all is set, we are good to go.<\/p>\n<h2>The Modal Window<\/h2>\n<p>Using Modal is the better method to get attention from users versus using pop-up windows which could be blocked by the browsers. Let\u2019s see the following example:<\/p>\n<p>The modal window in Bootstrap is simply defined as <code>modal<\/code> class. We can add several sections in it, like the content and the header, each can be contained with a <code>div<\/code> and respectively assigned with these classes <code>modal-body<\/code> and <code>modal-header<\/code>.<\/p>\n<pre>\r\n&lt;div id=\"modal\" class=\"modal\"&gt;\r\n\t&lt;div class=\"modal-header\"&gt;\r\n\t\t&lt;h2&gt;Lorem Ipsum&lt;\/h2&gt;\r\n\t&lt;\/div&gt;\t\r\n\t&lt;div class=\"modal-body\"&gt;\r\n\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat sem ipsum, ut faucibus nulla. \r\n\t\tNullam mattis volutpat dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque mollis, nibh \r\n\t\ttortor semper elit, eget rutrum purus nulla id quam.&lt;\/p&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>We haven\u2019t done any fancy stuff here. Thus, this markup will give only the following result in the browser.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal.jpg\" alt=\"bootstrap model\" width=\"500\" height=\"212\"><\/figure>\n<h2>Assigning The Trigger<\/h2>\n<p>Furthermore, let\u2019s say we want this modal window to only show with a click as the trigger, we need to do the following. First, we add <code>hide<\/code> class in the <code>div<\/code> to hide the modal window, like so:<\/p>\n<pre>\r\n&lt;div id=\"modal\" class=\"modal hide\"&gt;\r\n\t&lt;div class=\"modal-header\"&gt;\r\n\t\t&lt;h2&gt;Lorem Ipsum&lt;\/h2&gt;\r\n\t&lt;\/div&gt;\t\r\n\t&lt;div class=\"modal-body\"&gt;\r\n\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. \r\n\t\tDonec placerat sem ipsum, ut faucibus nulla. Nullam mattis volutpat\r\n\t\tdolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque \r\n\t\tmollis, nibh tortor semper elit, eget rutrum purus nulla id quam.&lt;\/p&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Then, anywhere on the Web page, we add a button link.<\/p>\n<pre>\r\n&lt;a href=\"#modal\" role=\"button\" class=\"btn\" data-toggle=\"modal\"&gt;Click Me&lt;\/a&gt; \r\n<\/pre>\n<p>Notice the <code>data-<\/code> attribute in the button, it\u2019s a new attribute added in HTML5 specification, and in this case we use this attribute to target our modal window.<\/p>\n<p>Lastly, to activate the modal, place this jQuery line.<\/p>\n<pre>\r\n$('#modal').modal();\r\n<\/pre>\n<p>Go back to the browser and refresh. You should see the modal window now hidden and we have the button in there. Now, when we click on the button, the modal window will pop up instanteneously.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal-show.jpg\" alt=\"bootstrap model show\" width=\"500\" height=\"320\"><\/figure>\n<h2>The Close Button<\/h2>\n<p>There is a constraint though. How do we hide the modal window?. To do so, we need to put a <code>button<\/code> element inside the modal window header:<\/p>\n<pre>\r\n&lt;button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"&gt;&times;&lt;\/button&gt;\r\n<\/pre>\n<p>In this button we also added a <code>data-<\/code> attribute that pointed to the modal window. That\u2019s it, all other things like the class and the function have been taken care of and once we click on this button, the window should be hidden.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal-close.jpg\" alt=\"bootstrap model close\" width=\"500\" height=\"280\"><\/figure>\n<h2>Fade Effect<\/h2>\n<p>Now, let\u2019s make the modal window fancier. In this case, we are going to add the fade effect. To do so, we simply add <code>fade<\/code> class in in the <code>div<\/code>, as follows.<\/p>\n<pre>\r\n&lt;div id=\"modal\" class=\"modal hide fade\"&gt;\r\n\t&lt;div class=\"modal-header\"&gt;\r\n\t\t&lt;button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"&gt;&times;&lt;\/button&gt;\r\n\t\t&lt;h2&gt;Lorem Ipsum&lt;\/h2&gt;\r\n\t&lt;\/div&gt;\t\r\n\t&lt;div class=\"modal-body\"&gt;\r\n\t\t&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. \r\n\t\tDonec placerat sem ipsum, ut faucibus nulla. Nullam mattis volutpat\r\n\t\tdolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque \r\n\t\tmollis, nibh tortor semper elit, eget rutrum purus nulla id quam.&lt;\/p&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Now, instead of showing up instantly, the modal window will slide down and fade in, then when close the window it will do the opposite, slide up and fade out. Most of these effect is done through the CSS3 new properties.<\/p>\n<h2>Bonus Tip<\/h2>\n<p>The Modal window plugin in Bootstrap is easy to implement. But, can we use it for other than the Bootstrap framework? Fortunately, Bootstrap has provided an option to download only necessary parts of Bootstrap. So, if you need only this plugin for your non-Bootstrap website, here is what you can do:<\/p>\n<p>In Bootstrap website, go to <a href=\"https:\/\/getbootstrap.com\/2.3.2\/customize.html\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Customization<\/a> page. In this page, uncheck all the options and select only the following:<\/p>\n<ul>\n<li>Buttons style under <strong>Base CSS<\/strong>.<\/li>\n<li>Modals under <strong>JS Components<\/strong>.<\/li>\n<li>Modal under <strong>jQuery plugins<\/strong>.<\/li>\n<\/ul>\n<p>That way, our files will not be bloated with other library codes that are not necessary.<\/p>","protected":false},"excerpt":{"rendered":"<p>Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have adopted Bootstrap as the foundation of their website or webapps. In our previous post we walked through some UI Components in Bootstrap. This time, in this post we are going&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2289,166],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bootstrap 201: Modal Window Plugin<\/title>\n<meta name=\"description\" content=\"Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have\" \/>\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.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with Bootstrap Plugin: Modal Window\" \/>\n<meta property=\"og:description\" content=\"Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-13T13:01:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:30:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Working with Bootstrap Plugin: Modal Window\",\"datePublished\":\"2013-03-13T13:01:05+00:00\",\"dateModified\":\"2025-04-03T17:30:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/\"},\"wordCount\":624,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-plugin-modal-window\\\/bootstrap-modal.jpg\",\"keywords\":[\"Bootstrap\",\"Twitter\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/\",\"name\":\"Bootstrap 201: Modal Window Plugin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-plugin-modal-window\\\/bootstrap-modal.jpg\",\"datePublished\":\"2013-03-13T13:01:05+00:00\",\"dateModified\":\"2025-04-03T17:30:21+00:00\",\"description\":\"Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-plugin-modal-window\\\/bootstrap-modal.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-plugin-modal-window\\\/bootstrap-modal.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-plugin-modal-window\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working with Bootstrap Plugin: Modal Window\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap 201: Modal Window Plugin","description":"Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have","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.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/","og_locale":"en_US","og_type":"article","og_title":"Working with Bootstrap Plugin: Modal Window","og_description":"Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have","og_url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-03-13T13:01:05+00:00","article_modified_time":"2025-04-03T17:30:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Working with Bootstrap Plugin: Modal Window","datePublished":"2013-03-13T13:01:05+00:00","dateModified":"2025-04-03T17:30:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/"},"wordCount":624,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal.jpg","keywords":["Bootstrap","Twitter"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/","url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/","name":"Bootstrap 201: Modal Window Plugin","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal.jpg","datePublished":"2013-03-13T13:01:05+00:00","dateModified":"2025-04-03T17:30:21+00:00","description":"Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see that there are many sites that have","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-plugin-modal-window\/bootstrap-modal.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Working with Bootstrap Plugin: Modal Window"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4kE","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16656"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16656\/revisions"}],"predecessor-version":[{"id":73580,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16656\/revisions\/73580"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16656"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}