{"id":5674,"date":"2020-03-05T16:23:41","date_gmt":"2020-03-05T16:23:41","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=5674"},"modified":"2020-03-05T16:23:41","modified_gmt":"2020-03-05T16:23:41","slug":"morphing-modal-window","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/morphing-modal-window\/","title":{"rendered":"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay"},"content":{"rendered":"<p><strong>How we can create an expanding modal overlay using HTML CSS JS? Solution: See this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay.<\/strong><\/p>\n<p>Previously I have shared some <span><a href=\"https:\/\/webdevtrick.com\/tag\/modal\" target=\"_blank\" rel=\"noopener noreferrer\">modal<\/a><\/span> programs, but it is different from others it is an <strong>expanding modal overlay<\/strong>. Basically, A\u00a0<b>modal<\/b> is a <strong>dialog box\/popup window<\/strong> that is displayed on top of the current page. And Morphing involves automatically matching the basic look and feel of a website. And it is the combination of <strong>modal and morphing effect<\/strong>, it is a cool expanding modal overlay.<\/p>\n<p>Today you will learn to create a <strong>Fire Modal Overlay<\/strong>. Basically, there are some text and a <span><a href=\"https:\/\/webdevtrick.com\/tag\/button\" target=\"_blank\" rel=\"noopener noreferrer\">button<\/a><\/span> to open the <strong>modal<\/strong>. When you will <strong>click on the button<\/strong> then the <strong>modal overlay<\/strong> will appear with a <strong>circular expanding effect<\/strong>. The modal window contains a bunch of text and a <strong>close button<\/strong> with a cross icon. When you will click on the close button the <strong>modal will disappear<\/strong> and the previous button will show again.<\/p>\n<p>So, Today I am sharing <strong>Morphing Modal Window<\/strong> With <strong>JavaScript and CSS<\/strong>. There I have used a <span><a href=\"https:\/\/webdevtrick.com\/tag\/jquery\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery<\/a><\/span> and a plugin for creating the program. And the layout and styles are based on <strong>HTML CSS<\/strong>. This is a <strong>cool modal overlay<\/strong> program that can be used on multiple sections like info, learn more, etc places. You can use this program on your website after some modifications.<\/p>\n<p>If you are thinking now how this fire or expanding modal window actually is, then see the preview given below.<\/p>\n<h3>Preview Of Expanding or Fire Modal Overlay<\/h3>\n<p>See this video preview to getting an idea of how this expanding modal looks like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-5674-1\" width=\"640\" height=\"310\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/fire-modal-overlay.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/fire-modal-overlay.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/fire-modal-overlay.mp4<\/a><\/video><\/div>\n<a class=\"maxbutton-2 maxbutton maxbutton-demo\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/webdevtrick.com\/demos\/morphing-modal-window\/#\"><span class='mb-text'>Live Demo<\/span><\/a>\n<p>Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/text-to-search-input-animation\/\" target=\"_blank\" rel=\"noopener noreferrer\">Text to Search Input Animation<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/lazy-load-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Load Images<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/flex-hover-slider\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flex Hover Slider<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/jquery-font-resize\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery Font Resize Program<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>Morphing Modal Window Source Code<\/h2>\n<p>Before <strong>sharing source code<\/strong>, let&#8217;s talk about it. First I have created a section with a class named container and placed all items inside it. Inside the sections, I have placed a line of text and a button using Div and Hyperlink tags. Also, I have created another section inside the container section for <span><a href=\"https:\/\/webdevtrick.com\/tag\/overlay\" target=\"_blank\" rel=\"noopener noreferrer\">overlay<\/a><\/span> elements. This section contains a bunch of text and a close button.<\/p>\n<p>Now <strong>using CSS<\/strong> I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to all the elements. After that, I have used <strong>CSS transition and transform<\/strong> command to create <span><a href=\"https:\/\/webdevtrick.com\/tag\/css-animation\" target=\"_blank\" rel=\"noopener noreferrer\">animations<\/a><\/span>. And used @media query to create a <strong>responsive design<\/strong>, the close button has an SVG icon.<\/p>\n<p><strong>jQuery<\/strong> handling here the open and <strong>close feature<\/strong> of the <strong>modal overlay<\/strong>. Also, it handling the <strong>circular expanding effect<\/strong> in every screen size. As you know there I have used a jQuery plugin named velocity.js and linked in the <strong>HTML file<\/strong>. There I have used <span class=\"lang:default decode:true crayon-inline\">if{}<\/span> condition to declare the actions. Left all other things you will understand after <strong>getting the codes<\/strong>, I can&#8217;t explain all in writing.<\/p>\n<p>For creating this program you have to create 3 files. First file for <strong>HTML<\/strong>, second for <strong>CSS<\/strong>, and the third file for <strong>JavaScript<\/strong>. Follow the steps to creating this program without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<em><strong>index.html<\/strong><\/em>&#8216; and put these codes given below.<\/p>\n<pre class=\"height-set:true height:750 lang:xhtml decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!--Code By Webdevtrick ( https:\/\/webdevtrick.com )--&gt;\r\n&lt;html lang=\"en\" &gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;Morphing Modal Window | Webdevtrick.com&lt;\/title&gt;\r\n  &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/modernizr\/2.8.3\/modernizr.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n&lt;link href='https:\/\/fonts.googleapis.com\/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text\/css'&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/meyer-reset\/2.0\/reset.min.css\"&gt;\r\n&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;section class=\"container\"&gt;\r\n\t\t&lt;p&gt;\r\n\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsum repudiandae sequi ut optio reiciendis consectetur, cum, a provident, iusto quod esse, perferendis iure iste! Quidem itaque, exercitationem aliquam, mollitia recusandae repellat dolores quibusdam minima quae reprehenderit ut, reiciendis officia.\r\n\t\t&lt;\/p&gt;\r\n\r\n\t\t&lt;div class=\"cd-modal-action\"&gt;\r\n\t\t\t&lt;a href=\"#\" class=\"btn\" data-type=\"modal-trigger\"&gt;Fire Modal Window&lt;\/a&gt;\r\n\t\t\t&lt;span class=\"cd-modal-bg\"&gt;&lt;\/span&gt;\r\n\t\t&lt;\/div&gt; \r\n\t\t&lt;div class=\"cd-modal\"&gt;\r\n\t\t\t&lt;div class=\"cd-modal-content\"&gt;\r\n\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit harum nulla, nesciunt molestias, iusto aliquam aperiam est qui possimus reprehenderit ipsam ea aut assumenda inventore iste! Animi quaerat facere repudiandae earum quisquam accusamus tempora, delectus nesciunt, provident quae aliquam, voluptatum beatae quis similique in maiores repellat eligendi voluptas veniam optio illum vero! Eius, dignissimos esse eligendi veniam.\r\n\t\t\t\t&lt;\/p&gt;\r\n\r\n\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit harum nulla, nesciunt molestias, iusto aliquam aperiam est qui possimus reprehenderit ipsam ea aut assumenda inventore iste! Animi quaerat facere repudiandae earum quisquam accusamus tempora, delectus nesciunt, provident quae aliquam, voluptatum beatae quis similique in maiores repellat eligendi voluptas veniam optio illum vero! Eius, dignissimos esse eligendi veniam.\r\n\t\t\t\t&lt;\/p&gt;\r\n\r\n\t\t\t\t&lt;p&gt;\r\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit harum nulla, nesciunt molestias, iusto aliquam aperiam est qui possimus reprehenderit ipsam ea aut assumenda inventore iste! Animi quaerat facere repudiandae earum quisquam accusamus tempora, delectus nesciunt, provident quae aliquam, voluptatum beatae quis similique in maiores repellat eligendi voluptas veniam optio illum vero! Eius, dignissimos esse eligendi veniam.\r\n\t\t\t\t&lt;\/p&gt;\r\n\t\t\t&lt;\/div&gt; \r\n\t\t&lt;\/div&gt;\r\n\r\n\t\t&lt;a href=\"#\" class=\"cd-modal-close\"&gt;Close&lt;\/a&gt;\r\n\t&lt;\/section&gt; \r\n\r\n&lt;script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js'&gt;&lt;\/script&gt;\r\n&lt;script src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/148866\/velocity.min.js'&gt;&lt;\/script&gt;\r\n&lt;script  src=\"function.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<em><strong>style.css<\/strong><\/em>&#8216; and put these codes given here.<\/p>\n<pre class=\"height-set:true height:750 lang:css decode:true \" title=\"style.css\">\/* Code By Webdevtrick ( https:\/\/webdevtrick.com ) *\/\r\n*, *::after, *::before {\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n  font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n  font-size: 1.6rem;\r\n  font-family: \"Source Sans Pro\", sans-serif;\r\n  color: #34383c;\r\n  background-color: #ffffff;\r\n}\r\nbody.overflow-hidden {\r\n  overflow: hidden;\r\n}\r\n\r\na {\r\n  color: #ff4747;\r\n  text-decoration: none;\r\n}\r\n\r\n\r\n.container {\r\n  padding: 2em 5%;\r\n  text-align: center;\r\n  background-color: #ff4747;\r\n}\r\n.container p {\r\n  margin: 2em 0;\r\n  line-height: 1.6;\r\n  color: #ffffff;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n@media only screen and (min-width: 768px) {\r\n  .container {\r\n    padding: 4em 10%;\r\n  }\r\n  .container p {\r\n    font-size: 1.8rem;\r\n    line-height: 2;\r\n  }\r\n}\r\n@media only screen and (min-width: 1170px) {\r\n  .container {\r\n    padding: 4em 20%;\r\n  }\r\n}\r\n\r\n.cd-modal {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n  -webkit-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;\r\n  -moz-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;\r\n  transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s;\r\n}\r\n.cd-modal::after {\r\n  \/* gradient overlay at bottom of modal window *\/\r\n  content: '';\r\n  position: absolute;\r\n  left: 0;\r\n  bottom: 0;\r\n  width: 100%;\r\n  height: 60px;\r\n  pointer-events: none;\r\n  background: transparent;\r\n  background: -webkit-linear-gradient( bottom , #34383c, rgba(52, 56, 60, 0));\r\n  background: linear-gradient(to top, #34383c, rgba(52, 56, 60, 0));\r\n}\r\n.cd-modal .cd-modal-content {\r\n  height: 100%;\r\n  width: 100%;\r\n  padding: 3em 5%;\r\n  text-align: left;\r\n  overflow-y: auto;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n.cd-modal p {\r\n  color: #ffffff;\r\n  line-height: 1.6;\r\n  margin: 2em 0;\r\n}\r\n.modal-is-visible .cd-modal {\r\n  z-index: 1;\r\n  visibility: visible;\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n  -webkit-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;\r\n  -moz-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;\r\n  transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s;\r\n}\r\n.modal-is-visible .cd-modal .cd-modal-content {\r\n  -webkit-overflow-scrolling: touch;\r\n}\r\n@media only screen and (min-width: 768px) {\r\n  .cd-modal .cd-modal-content {\r\n    padding: 4em 10%;\r\n  }\r\n}\r\n@media only screen and (min-width: 1170px) {\r\n  .cd-modal .cd-modal-content {\r\n    padding: 6em 20%;\r\n  }\r\n  .cd-modal p {\r\n    font-size: 2rem;\r\n    line-height: 2;\r\n  }\r\n}\r\n\r\n.cd-modal-action {\r\n  position: relative;\r\n}\r\n.cd-modal-action .btn, .cd-modal-action .cd-modal-bg {\r\n  display: inline-block;\r\n  height: 4em;\r\n  background-color: #34383c;\r\n}\r\n.cd-modal-action .btn {\r\n  width: 12.5em;\r\n  border-radius: 5em;\r\n  color: #ffffff;\r\n  line-height: 4em;\r\n  white-space: nowrap;\r\n  font-weight: 700;\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n  -webkit-transition: color 0.2s 0.3s, width 0.3s 0s;\r\n  -moz-transition: color 0.2s 0.3s, width 0.3s 0s;\r\n  transition: color 0.2s 0.3s, width 0.3s 0s;\r\n}\r\n.cd-modal-action .btn.to-circle {\r\n  width: 4em;\r\n  color: transparent;\r\n  -webkit-transition: color 0.2s 0s, width 0.3s 0.2s;\r\n  -moz-transition: color 0.2s 0s, width 0.3s 0.2s;\r\n  transition: color 0.2s 0s, width 0.3s 0.2s;\r\n}\r\n.cd-modal-action .cd-modal-bg {\r\n  position: absolute;\r\n  z-index: 1;\r\n  left: 50%;\r\n  top: 0;\r\n  width: 4em;\r\n  border-radius: 50%;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  -webkit-transform: translateZ(0);\r\n  -moz-transform: translateZ(0);\r\n  -ms-transform: translateZ(0);\r\n  -o-transform: translateZ(0);\r\n  transform: translateZ(0);\r\n  -webkit-transform: translateX(-2em);\r\n  -moz-transform: translateX(-2em);\r\n  -ms-transform: translateX(-2em);\r\n  -o-transform: translateX(-2em);\r\n  transform: translateX(-2em);\r\n  -webkit-transition: visibility 0s 0.5s;\r\n  -moz-transition: visibility 0s 0.5s;\r\n  transition: visibility 0s 0.5s;\r\n}\r\n.cd-modal-action .cd-modal-bg.is-visible {\r\n  opacity: 1;\r\n  visibility: visible;\r\n}\r\n\r\n.cd-modal-close {\r\n  position: fixed;\r\n  z-index: 1;\r\n  top: 20px;\r\n  right: 5%;\r\n  height: 50px;\r\n  width: 50px;\r\n  border-radius: 50%;\r\n  background: rgba(0, 0, 0, 0.3) url(https:\/\/webdevtrick.com\/wp-content\/uploads\/close-icon.svg) no-repeat center center;\r\n  \/* image replacement *\/\r\n  overflow: hidden;\r\n  text-indent: 100%;\r\n  white-space: nowrap;\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  -webkit-transform: translateZ(0);\r\n  -moz-transform: translateZ(0);\r\n  -ms-transform: translateZ(0);\r\n  -o-transform: translateZ(0);\r\n  transform: translateZ(0);\r\n  -webkit-transform: scale(0);\r\n  -moz-transform: scale(0);\r\n  -ms-transform: scale(0);\r\n  -o-transform: scale(0);\r\n  transform: scale(0);\r\n  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;\r\n  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;\r\n  transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;\r\n}\r\n.no-touch .cd-modal-close:hover {\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n}\r\n.modal-is-visible .cd-modal-close {\r\n  visibility: visible;\r\n  opacity: 1;\r\n  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;\r\n  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;\r\n  transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;\r\n  -webkit-transform: scale(1);\r\n  -moz-transform: scale(1);\r\n  -ms-transform: scale(1);\r\n  -o-transform: scale(1);\r\n  transform: scale(1);\r\n}\r\n@media only screen and (min-width: 768px) {\r\n  .cd-modal-close {\r\n    top: 70px;\r\n  }\r\n}<\/pre>\n<p><span style=\"font-size: 14pt;\">function.js<\/span><\/p>\n<p>The final step, create a JavaScript file named &#8216;<em><strong>function.js<\/strong><\/em>&#8216; and put the codes.<\/p>\n<pre class=\"height-set:true height:750 lang:js decode:true \" title=\"function.js\">\/\/ Code By Webdevtrick ( https:\/\/webdevtrick.com )\r\njQuery(document).ready(function($){\r\n\t\/\/trigger the animation - open modal window\r\n\t$('[data-type=\"modal-trigger\"]').on('click', function(){\r\n\t\tvar actionBtn = $(this),\r\n\t\t\tscaleValue = retrieveScale(actionBtn.next('.cd-modal-bg'));\r\n\t\t\r\n\t\tactionBtn.addClass('to-circle');\r\n\t\tactionBtn.next('.cd-modal-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){\r\n\t\t\tanimateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);\r\n\t\t});\r\n\r\n\t\t\/\/if browser doesn't support transitions...\r\n\t\tif(actionBtn.parents('.no-csstransitions').length &gt; 0 ) animateLayer(actionBtn.next('.cd-modal-bg'), scaleValue, true);\r\n\t});\r\n\r\n\t\/\/trigger the animation - close modal window\r\n\t$('.container .cd-modal-close').on('click', function(){\r\n\t\tcloseModal();\r\n\t});\r\n\t$(document).keyup(function(event){\r\n\t\tif(event.which=='27') closeModal();\r\n\t});\r\n\r\n\t$(window).on('resize', function(){\r\n\t\t\/\/on window resize - update cover layer dimention and position\r\n\t\tif($('.container.modal-is-visible').length &gt; 0) window.requestAnimationFrame(updateLayer);\r\n\t});\r\n\r\n\tfunction retrieveScale(btn) {\r\n\t\tvar btnRadius = btn.width()\/2,\r\n\t\t\tleft = btn.offset().left + btnRadius,\r\n\t\t\ttop = btn.offset().top + btnRadius - $(window).scrollTop(),\r\n\t\t\tscale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());\r\n\r\n\t\tbtn.css('position', 'fixed').velocity({\r\n\t\t\ttop: top - btnRadius,\r\n\t\t\tleft: left - btnRadius,\r\n\t\t\ttranslateX: 0,\r\n\t\t}, 0);\r\n\r\n\t\treturn scale;\r\n\t}\r\n\r\n\tfunction scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {\r\n\t\tvar maxDistHor = ( leftValue &gt; windowW\/2) ? leftValue : (windowW - leftValue),\r\n\t\t\tmaxDistVert = ( topValue &gt; windowH\/2) ? topValue : (windowH - topValue);\r\n\t\treturn Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )\/radiusValue);\r\n\t}\r\n\r\n\tfunction animateLayer(layer, scaleVal, bool) {\r\n\t\tlayer.velocity({ scale: scaleVal }, 400, function(){\r\n\t\t\t$('body').toggleClass('overflow-hidden', bool);\r\n\t\t\t(bool) \r\n\t\t\t\t? layer.parents('.container').addClass('modal-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')\r\n\t\t\t\t: layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type=\"modal-trigger\"]').removeClass('to-circle');\r\n\t\t});\r\n\t}\r\n\r\n\tfunction updateLayer() {\r\n\t\tvar layer = $('.container.modal-is-visible').find('.cd-modal-bg'),\r\n\t\t\tlayerRadius = layer.width()\/2,\r\n\t\t\tlayerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),\r\n\t\t\tlayerLeft = layer.siblings('.btn').offset().left + layerRadius,\r\n\t\t\tscale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());\r\n\t\t\r\n\t\tlayer.velocity({\r\n\t\t\ttop: layerTop - layerRadius,\r\n\t\t\tleft: layerLeft - layerRadius,\r\n\t\t\tscale: scale,\r\n\t\t}, 0);\r\n\t}\r\n\r\n\tfunction closeModal() {\r\n\t\tvar section = $('.container.modal-is-visible');\r\n\t\tsection.removeClass('modal-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){\r\n\t\t\tanimateLayer(section.find('.cd-modal-bg'), 1, false);\r\n\t\t});\r\n\t\t\/\/if browser doesn't support transitions...\r\n\t\tif(section.parents('.no-csstransitions').length &gt; 0 ) animateLayer(section.find('.cd-modal-bg'), 1, false);\r\n\t}\r\n});<\/pre>\n<p>That&#8217;s It. Now you have successfully created <strong>Morphing Modal Window<\/strong> With JavaScript and CSS, <strong>Expanding or Fire Modal Overlay<\/strong>. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create an expanding modal overlay using HTML CSS JS? Solution: See this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay. Previously I have shared some modal programs, but it is different from others it is an expanding modal overlay. Basically, A\u00a0modal is a dialog box\/popup window that is displayed on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5675,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,46],"tags":[395,442,197,240,539,239,67],"class_list":["post-5674","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-javascript","tag-expandable","tag-expanding-button","tag-jquery","tag-modal","tag-morphing","tag-overlay","tag-source-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay<\/title>\n<meta name=\"description\" content=\"Want to create a expanding modal popup? Checkout this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay. Get demo and source code now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/morphing-modal-window\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay\" \/>\n<meta property=\"og:description\" content=\"Want to create a expanding modal popup? Checkout this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay. Get demo and source code now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/morphing-modal-window\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-05T16:23:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay\",\"datePublished\":\"2020-03-05T16:23:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/\"},\"wordCount\":684,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg\",\"keywords\":[\"expandable\",\"expanding button\",\"jquery\",\"modal\",\"morphing\",\"overlay\",\"source code\"],\"articleSection\":[\"CSS\",\"HTML\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/morphing-modal-window\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/\",\"url\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/\",\"name\":\"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg\",\"datePublished\":\"2020-03-05T16:23:41+00:00\",\"description\":\"Want to create a expanding modal popup? Checkout this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay. Get demo and source code now.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/morphing-modal-window\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg\",\"width\":1200,\"height\":630,\"caption\":\"morphing modal window\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/morphing-modal-window\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay","description":"Want to create a expanding modal popup? Checkout this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay. Get demo and source code now.","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:\/\/webdevtrick.com\/morphing-modal-window\/","og_locale":"en_US","og_type":"article","og_title":"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay","og_description":"Want to create a expanding modal popup? Checkout this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay. Get demo and source code now.","og_url":"https:\/\/webdevtrick.com\/morphing-modal-window\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2020-03-05T16:23:41+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay","datePublished":"2020-03-05T16:23:41+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/"},"wordCount":684,"commentCount":1,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg","keywords":["expandable","expanding button","jquery","modal","morphing","overlay","source code"],"articleSection":["CSS","HTML","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/morphing-modal-window\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/","url":"https:\/\/webdevtrick.com\/morphing-modal-window\/","name":"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg","datePublished":"2020-03-05T16:23:41+00:00","description":"Want to create a expanding modal popup? Checkout this Morphing Modal Window With JavaScript and CSS, Fire Modal Overlay. Get demo and source code now.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/morphing-modal-window\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/morphing-modal-window.jpg","width":1200,"height":630,"caption":"morphing modal window"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/morphing-modal-window\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"Morphing Modal Window With JavaScript and CSS | Fire Modal Overlay"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=5674"}],"version-history":[{"count":7,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5674\/revisions"}],"predecessor-version":[{"id":5683,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/5674\/revisions\/5683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/5675"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=5674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=5674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=5674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}