In this blog, we learn how to create morphing modal window using HTML, CSS and Javascript.
First of all, create an HTML File and paste the below code.
HTML CODE:
[pastacode manual=”%3C!doctype%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%20class%3D%22no-js%22%3E%0D%0A%3Chead%3E%0D%0A%09%3Cmeta%20charset%3D%22UTF-8%22%3E%0D%0A%09%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0D%0A%0D%0A%09%3Clink%20href%3D’http%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DSource%2BSans%2BPro%3A300%2C400%2C700’%20rel%3D’stylesheet’%20type%3D’text%2Fcss’%3E%0D%0A%0D%0A%09%3Clink%20rel%3D%22stylesheet%22%20href%3D%22css%2Freset.css%22%3E%20%3C!–%20CSS%20reset%20–%3E%0D%0A%09%3Clink%20rel%3D%22stylesheet%22%20href%3D%22css%2Fstyle.css%22%3E%20%3C!–%20Resource%20style%20–%3E%0D%0A%09%3Cscript%20src%3D%22js%2Fmodernizr.js%22%3E%3C%2Fscript%3E%20%3C!–%20Modernizr%20–%3E%0D%0A%20%20%09%0D%0A%09%3Ctitle%3EMorphing%20Modal%20Window%3C%2Ftitle%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%3E%0D%0A%09%3Cheader%3E%0D%0A%09%09%3Ch1%3EMorphing%20Modal%20Window%3C%2Fh1%3E%09%0D%0A%09%3C%2Fheader%3E%0D%0A%0D%0A%09%3Csection%20class%3D%22cd-section%22%3E%0D%0A%09%09%3Cp%3E%0D%0A%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit.%20Non%20ipsum%20repudiandae%20sequi%20ut%20optio%20reiciendis%20consectetur%2C%20cum%2C%20a%20provident%2C%20iusto%20quod%20esse%2C%20perferendis%20iure%20iste!%20Quidem%20itaque%2C%20exercitationem%20aliquam%2C%20mollitia%20recusandae%20repellat%20dolores%20quibusdam%20minima%20quae%20reprehenderit%20ut%2C%20reiciendis%20officia.%0D%0A%09%09%3C%2Fp%3E%0D%0A%0D%0A%09%09%3Cdiv%20class%3D%22cd-modal-action%22%3E%0D%0A%09%09%09%3Ca%20href%3D%22%230%22%20class%3D%22btn%22%20data-type%3D%22modal-trigger%22%3EFire%20Modal%20Window%3C%2Fa%3E%0D%0A%09%09%09%3Cspan%20class%3D%22cd-modal-bg%22%3E%3C%2Fspan%3E%0D%0A%09%09%3C%2Fdiv%3E%20%3C!–%20cd-modal-action%20–%3E%0D%0A%0D%0A%09%09%3Cdiv%20class%3D%22cd-modal%22%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22cd-modal-content%22%3E%0D%0A%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit.%20Ad%20modi%20repellendus%2C%20optio%20eveniet%20eligendi%20molestiae%3F%20Fugiat%2C%20temporibus!%20A%20rerum%20pariatur%20neque%20laborum%20earum%2C%20illum%20voluptatibus%20eum%20voluptatem%20fugiat%2C%20porro%20animi%20tempora%3F%20Sit%20harum%20nulla%2C%20nesciunt%20molestias%2C%20iusto%20aliquam%20aperiam%20est%20qui%20possimus%20reprehenderit%20ipsam%20ea%20aut%20assumenda%20inventore%20iste!%20Animi%20quaerat%20facere%20repudiandae%20earum%20quisquam%20accusamus%20tempora%2C%20delectus%20nesciunt%2C%20provident%20quae%20aliquam%2C%20voluptatum%20beatae%20quis%20similique%20in%20maiores%20repellat%20eligendi%20voluptas%20veniam%20optio%20illum%20vero!%20Eius%2C%20dignissimos%20esse%20eligendi%20veniam.%0D%0A%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit.%20Ad%20modi%20repellendus%2C%20optio%20eveniet%20eligendi%20molestiae%3F%20Fugiat%2C%20temporibus!%20A%20rerum%20pariatur%20neque%20laborum%20earum%2C%20illum%20voluptatibus%20eum%20voluptatem%20fugiat%2C%20porro%20animi%20tempora%3F%20Sit%20harum%20nulla%2C%20nesciunt%20molestias%2C%20iusto%20aliquam%20aperiam%20est%20qui%20possimus%20reprehenderit%20ipsam%20ea%20aut%20assumenda%20inventore%20iste!%20Animi%20quaerat%20facere%20repudiandae%20earum%20quisquam%20accusamus%20tempora%2C%20delectus%20nesciunt%2C%20provident%20quae%20aliquam%2C%20voluptatum%20beatae%20quis%20similique%20in%20maiores%20repellat%20eligendi%20voluptas%20veniam%20optio%20illum%20vero!%20Eius%2C%20dignissimos%20esse%20eligendi%20veniam.%0D%0A%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipisicing%20elit.%20Ad%20modi%20repellendus%2C%20optio%20eveniet%20eligendi%20molestiae%3F%20Fugiat%2C%20temporibus!%20A%20rerum%20pariatur%20neque%20laborum%20earum%2C%20illum%20voluptatibus%20eum%20voluptatem%20fugiat%2C%20porro%20animi%20tempora%3F%20Sit%20harum%20nulla%2C%20nesciunt%20molestias%2C%20iusto%20aliquam%20aperiam%20est%20qui%20possimus%20reprehenderit%20ipsam%20ea%20aut%20assumenda%20inventore%20iste!%20Animi%20quaerat%20facere%20repudiandae%20earum%20quisquam%20accusamus%20tempora%2C%20delectus%20nesciunt%2C%20provident%20quae%20aliquam%2C%20voluptatum%20beatae%20quis%20similique%20in%20maiores%20repellat%20eligendi%20voluptas%20veniam%20optio%20illum%20vero!%20Eius%2C%20dignissimos%20esse%20eligendi%20veniam.%0D%0A%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%3C%2Fdiv%3E%20%3C!–%20cd-modal-content%20–%3E%0D%0A%09%09%3C%2Fdiv%3E%20%3C!–%20cd-modal%20–%3E%0D%0A%0D%0A%09%09%3Ca%20href%3D%22%230%22%20class%3D%22cd-modal-close%22%3EClose%3C%2Fa%3E%0D%0A%09%3C%2Fsection%3E%20%3C!–%20.cd-section%20–%3E%0D%0A%09%0D%0A%3Cscript%20src%3D%22js%2Fjquery-2.1.1.js%22%3E%3C%2Fscript%3E%0D%0A%3Cscript%20src%3D%22js%2Fvelocity.min.js%22%3E%3C%2Fscript%3E%0D%0A%3Cscript%20src%3D%22js%2Fmain.js%22%3E%3C%2Fscript%3E%20%3C!–%20Resource%20jQuery%20–%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]
Now create a CSS file and paste the below code.
[pastacode manual=”*%2C%20*%3A%3Aafter%2C%20*%3A%3Abefore%20%7B%0D%0A%20%20-webkit-box-sizing%3A%20border-box%3B%0D%0A%20%20-moz-box-sizing%3A%20border-box%3B%0D%0A%20%20box-sizing%3A%20border-box%3B%0D%0A%7D%0D%0A%0D%0Ahtml%20%7B%0D%0A%20%20font-size%3A%2062.5%25%3B%0D%0A%7D%0D%0A%0D%0Abody%20%7B%0D%0A%20%20font-size%3A%201.6rem%3B%0D%0A%20%20font-family%3A%20%22Source%20Sans%20Pro%22%2C%20sans-serif%3B%0D%0A%20%20color%3A%20%2334383c%3B%0D%0A%20%20background-color%3A%20%23ffffff%3B%0D%0A%7D%0D%0Abody.overflow-hidden%20%7B%0D%0A%20%20%2F*%20used%20when%20modal%20is%20visible%20*%2F%0D%0A%20%20overflow%3A%20hidden%3B%0D%0A%7D%0D%0A%0D%0Aa%20%7B%0D%0A%20%20color%3A%20%2303bb91%3B%0D%0A%20%20text-decoration%3A%20none%3B%0D%0A%7D%0D%0A%2F*%20——————————–%20%0D%0AMain%20Components%20%0D%0A——————————–%20*%2F%0D%0Aheader%20%7B%0D%0A%20%20position%3A%20relative%3B%0D%0A%20%20height%3A%20160px%3B%0D%0A%20%20line-height%3A%20160px%3B%0D%0A%7D%0D%0Aheader%20h1%20%7B%0D%0A%20%20font-size%3A%202.4rem%3B%0D%0A%20%20text-align%3A%20center%3B%0D%0A%7D%0D%0A%40media%20only%20screen%20and%20(min-width%3A%201170px)%20%7B%0D%0A%20%20header%20%7B%0D%0A%20%20%20%20height%3A%20240px%3B%0D%0A%20%20%20%20line-height%3A%20240px%3B%0D%0A%20%20%7D%0D%0A%20%20header%20h1%20%7B%0D%0A%20%20%20%20font-size%3A%203.2rem%3B%0D%0A%20%20%20%20font-weight%3A%20300%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%0D%0A.cd-section%20%7B%0D%0A%20%20padding%3A%202em%205%25%3B%0D%0A%20%20text-align%3A%20center%3B%0D%0A%20%20background-color%3A%20%2303bb91%3B%0D%0A%7D%0D%0A.cd-section%20p%20%7B%0D%0A%20%20margin%3A%202em%200%3B%0D%0A%20%20line-height%3A%201.6%3B%0D%0A%20%20color%3A%20%23ffffff%3B%0D%0A%20%20-webkit-font-smoothing%3A%20antialiased%3B%0D%0A%20%20-moz-osx-font-smoothing%3A%20grayscale%3B%0D%0A%7D%0D%0A%40media%20only%20screen%20and%20(min-width%3A%20768px)%20%7B%0D%0A%20%20.cd-section%20%7B%0D%0A%20%20%20%20padding%3A%204em%2010%25%3B%0D%0A%20%20%7D%0D%0A%20%20.cd-section%20p%20%7B%0D%0A%20%20%20%20font-size%3A%201.8rem%3B%0D%0A%20%20%20%20line-height%3A%202%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%40media%20only%20screen%20and%20(min-width%3A%201170px)%20%7B%0D%0A%20%20.cd-section%20%7B%0D%0A%20%20%20%20padding%3A%204em%2020%25%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%0D%0A.cd-modal%20%7B%0D%0A%20%20position%3A%20fixed%3B%0D%0A%20%20top%3A%200%3B%0D%0A%20%20left%3A%200%3B%0D%0A%20%20width%3A%20100%25%3B%0D%0A%20%20height%3A%20100%25%3B%0D%0A%20%20visibility%3A%20hidden%3B%0D%0A%20%20opacity%3A%200%3B%0D%0A%20%20pointer-events%3A%20none%3B%0D%0A%20%20-webkit-transition%3A%20visibility%200s%200.3s%2C%20opacity%200.3s%200s%2C%20z-index%200s%200.3s%3B%0D%0A%20%20-moz-transition%3A%20visibility%200s%200.3s%2C%20opacity%200.3s%200s%2C%20z-index%200s%200.3s%3B%0D%0A%20%20transition%3A%20visibility%200s%200.3s%2C%20opacity%200.3s%200s%2C%20z-index%200s%200.3s%3B%0D%0A%7D%0D%0A.cd-modal%3A%3Aafter%20%7B%0D%0A%20%20%2F*%20gradient%20overlay%20at%20bottom%20of%20modal%20window%20*%2F%0D%0A%20%20content%3A%20”%3B%0D%0A%20%20position%3A%20absolute%3B%0D%0A%20%20left%3A%200%3B%0D%0A%20%20bottom%3A%200%3B%0D%0A%20%20width%3A%20100%25%3B%0D%0A%20%20height%3A%2060px%3B%0D%0A%20%20pointer-events%3A%20none%3B%0D%0A%20%20background%3A%20transparent%3B%0D%0A%20%20background%3A%20-webkit-linear-gradient(%20bottom%20%2C%20%2334383c%2C%20rgba(52%2C%2056%2C%2060%2C%200))%3B%0D%0A%20%20background%3A%20linear-gradient(to%20top%2C%20%2334383c%2C%20rgba(52%2C%2056%2C%2060%2C%200))%3B%0D%0A%7D%0D%0A.cd-modal%20.cd-modal-content%20%7B%0D%0A%20%20height%3A%20100%25%3B%0D%0A%20%20width%3A%20100%25%3B%0D%0A%20%20padding%3A%203em%205%25%3B%0D%0A%20%20text-align%3A%20left%3B%0D%0A%20%20overflow-y%3A%20auto%3B%0D%0A%20%20-webkit-font-smoothing%3A%20antialiased%3B%0D%0A%20%20-moz-osx-font-smoothing%3A%20grayscale%3B%0D%0A%7D%0D%0A.cd-modal%20p%20%7B%0D%0A%20%20color%3A%20%23ffffff%3B%0D%0A%20%20line-height%3A%201.6%3B%0D%0A%20%20margin%3A%202em%200%3B%0D%0A%7D%0D%0A.modal-is-visible%20.cd-modal%20%7B%0D%0A%20%20z-index%3A%201%3B%0D%0A%20%20visibility%3A%20visible%3B%0D%0A%20%20opacity%3A%201%3B%0D%0A%20%20pointer-events%3A%20auto%3B%0D%0A%20%20-webkit-transition%3A%20visibility%200s%200s%2C%20opacity%200.3s%200s%2C%20z-index%200s%200s%3B%0D%0A%20%20-moz-transition%3A%20visibility%200s%200s%2C%20opacity%200.3s%200s%2C%20z-index%200s%200s%3B%0D%0A%20%20transition%3A%20visibility%200s%200s%2C%20opacity%200.3s%200s%2C%20z-index%200s%200s%3B%0D%0A%7D%0D%0A.modal-is-visible%20.cd-modal%20.cd-modal-content%20%7B%0D%0A%20%20-webkit-overflow-scrolling%3A%20touch%3B%0D%0A%7D%0D%0A%40media%20only%20screen%20and%20(min-width%3A%20768px)%20%7B%0D%0A%20%20.cd-modal%20.cd-modal-content%20%7B%0D%0A%20%20%20%20padding%3A%204em%2010%25%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%40media%20only%20screen%20and%20(min-width%3A%201170px)%20%7B%0D%0A%20%20.cd-modal%20.cd-modal-content%20%7B%0D%0A%20%20%20%20padding%3A%206em%2020%25%3B%0D%0A%20%20%7D%0D%0A%20%20.cd-modal%20p%20%7B%0D%0A%20%20%20%20font-size%3A%202rem%3B%0D%0A%20%20%20%20line-height%3A%202%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%0D%0A.cd-modal-action%20%7B%0D%0A%20%20position%3A%20relative%3B%0D%0A%7D%0D%0A.cd-modal-action%20.btn%2C%20.cd-modal-action%20.cd-modal-bg%20%7B%0D%0A%20%20display%3A%20inline-block%3B%0D%0A%20%20height%3A%204em%3B%0D%0A%20%20background-color%3A%20%2334383c%3B%0D%0A%7D%0D%0A.cd-modal-action%20.btn%20%7B%0D%0A%20%20width%3A%2012.5em%3B%0D%0A%20%20border-radius%3A%205em%3B%0D%0A%20%20color%3A%20%23ffffff%3B%0D%0A%20%20line-height%3A%204em%3B%0D%0A%20%20white-space%3A%20nowrap%3B%0D%0A%20%20font-weight%3A%20700%3B%0D%0A%20%20-webkit-font-smoothing%3A%20antialiased%3B%0D%0A%20%20-moz-osx-font-smoothing%3A%20grayscale%3B%0D%0A%20%20-webkit-transition%3A%20color%200.2s%200.3s%2C%20width%200.3s%200s%3B%0D%0A%20%20-moz-transition%3A%20color%200.2s%200.3s%2C%20width%200.3s%200s%3B%0D%0A%20%20transition%3A%20color%200.2s%200.3s%2C%20width%200.3s%200s%3B%0D%0A%7D%0D%0A.cd-modal-action%20.btn.to-circle%20%7B%0D%0A%20%20width%3A%204em%3B%0D%0A%20%20color%3A%20transparent%3B%0D%0A%20%20-webkit-transition%3A%20color%200.2s%200s%2C%20width%200.3s%200.2s%3B%0D%0A%20%20-moz-transition%3A%20color%200.2s%200s%2C%20width%200.3s%200.2s%3B%0D%0A%20%20transition%3A%20color%200.2s%200s%2C%20width%200.3s%200.2s%3B%0D%0A%7D%0D%0A.cd-modal-action%20.cd-modal-bg%20%7B%0D%0A%20%20position%3A%20absolute%3B%0D%0A%20%20z-index%3A%201%3B%0D%0A%20%20left%3A%2050%25%3B%0D%0A%20%20top%3A%200%3B%0D%0A%20%20width%3A%204em%3B%0D%0A%20%20border-radius%3A%2050%25%3B%0D%0A%20%20opacity%3A%200%3B%0D%0A%20%20visibility%3A%20hidden%3B%0D%0A%20%20-webkit-transform%3A%20translateZ(0)%3B%0D%0A%20%20-moz-transform%3A%20translateZ(0)%3B%0D%0A%20%20-ms-transform%3A%20translateZ(0)%3B%0D%0A%20%20-o-transform%3A%20translateZ(0)%3B%0D%0A%20%20transform%3A%20translateZ(0)%3B%0D%0A%20%20-webkit-transform%3A%20translateX(-2em)%3B%0D%0A%20%20-moz-transform%3A%20translateX(-2em)%3B%0D%0A%20%20-ms-transform%3A%20translateX(-2em)%3B%0D%0A%20%20-o-transform%3A%20translateX(-2em)%3B%0D%0A%20%20transform%3A%20translateX(-2em)%3B%0D%0A%20%20-webkit-transition%3A%20visibility%200s%200.5s%3B%0D%0A%20%20-moz-transition%3A%20visibility%200s%200.5s%3B%0D%0A%20%20transition%3A%20visibility%200s%200.5s%3B%0D%0A%7D%0D%0A.cd-modal-action%20.cd-modal-bg.is-visible%20%7B%0D%0A%20%20opacity%3A%201%3B%0D%0A%20%20visibility%3A%20visible%3B%0D%0A%7D%0D%0A%0D%0A.cd-modal-close%20%7B%0D%0A%20%20position%3A%20fixed%3B%0D%0A%20%20z-index%3A%201%3B%0D%0A%20%20top%3A%2020px%3B%0D%0A%20%20right%3A%205%25%3B%0D%0A%20%20height%3A%2050px%3B%0D%0A%20%20width%3A%2050px%3B%0D%0A%20%20border-radius%3A%2050%25%3B%0D%0A%20%20background%3A%20rgba(0%2C%200%2C%200%2C%200.3)%20url(..%2Fimg%2Fcd-icon-close.svg)%20no-repeat%20center%20center%3B%0D%0A%20%20%2F*%20image%20replacement%20*%2F%0D%0A%20%20overflow%3A%20hidden%3B%0D%0A%20%20text-indent%3A%20100%25%3B%0D%0A%20%20white-space%3A%20nowrap%3B%0D%0A%20%20visibility%3A%20hidden%3B%0D%0A%20%20opacity%3A%200%3B%0D%0A%20%20-webkit-transform%3A%20translateZ(0)%3B%0D%0A%20%20-moz-transform%3A%20translateZ(0)%3B%0D%0A%20%20-ms-transform%3A%20translateZ(0)%3B%0D%0A%20%20-o-transform%3A%20translateZ(0)%3B%0D%0A%20%20transform%3A%20translateZ(0)%3B%0D%0A%20%20-webkit-transform%3A%20scale(0)%3B%0D%0A%20%20-moz-transform%3A%20scale(0)%3B%0D%0A%20%20-ms-transform%3A%20scale(0)%3B%0D%0A%20%20-o-transform%3A%20scale(0)%3B%0D%0A%20%20transform%3A%20scale(0)%3B%0D%0A%20%20-webkit-transition%3A%20-webkit-transform%200.3s%200s%2C%20visibility%200s%200.3s%2C%20opacity%200.3s%200s%3B%0D%0A%20%20-moz-transition%3A%20-moz-transform%200.3s%200s%2C%20visibility%200s%200.3s%2C%20opacity%200.3s%200s%3B%0D%0A%20%20transition%3A%20transform%200.3s%200s%2C%20visibility%200s%200.3s%2C%20opacity%200.3s%200s%3B%0D%0A%7D%0D%0A.no-touch%20.cd-modal-close%3Ahover%20%7B%0D%0A%20%20background-color%3A%20rgba(0%2C%200%2C%200%2C%200.5)%3B%0D%0A%7D%0D%0A.modal-is-visible%20.cd-modal-close%20%7B%0D%0A%20%20visibility%3A%20visible%3B%0D%0A%20%20opacity%3A%201%3B%0D%0A%20%20-webkit-transition%3A%20-webkit-transform%200.3s%200s%2C%20visibility%200s%200s%2C%20opacity%200.3s%200s%3B%0D%0A%20%20-moz-transition%3A%20-moz-transform%200.3s%200s%2C%20visibility%200s%200s%2C%20opacity%200.3s%200s%3B%0D%0A%20%20transition%3A%20transform%200.3s%200s%2C%20visibility%200s%200s%2C%20opacity%200.3s%200s%3B%0D%0A%20%20-webkit-transform%3A%20scale(1)%3B%0D%0A%20%20-moz-transform%3A%20scale(1)%3B%0D%0A%20%20-ms-transform%3A%20scale(1)%3B%0D%0A%20%20-o-transform%3A%20scale(1)%3B%0D%0A%20%20transform%3A%20scale(1)%3B%0D%0A%7D%0D%0A%40media%20only%20screen%20and%20(min-width%3A%20768px)%20%7B%0D%0A%20%20.cd-modal-close%20%7B%0D%0A%20%20%20%20top%3A%2070px%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A” provider=”manual” lang=”default”/]
Javascript code:
[pastacode manual=”jQuery(document).ready(function(%24)%7B%0D%0A%09%2F%2Ftrigger%20the%20animation%20-%20open%20modal%20window%0D%0A%09%24(‘%5Bdata-type%3D%22modal-trigger%22%5D’).on(‘click’%2C%20function()%7B%0D%0A%09%09var%20actionBtn%20%3D%20%24(this)%2C%0D%0A%09%09%09scaleValue%20%3D%20retrieveScale(actionBtn.next(‘.cd-modal-bg’))%3B%0D%0A%09%09%0D%0A%09%09actionBtn.addClass(‘to-circle’)%3B%0D%0A%09%09actionBtn.next(‘.cd-modal-bg’).addClass(‘is-visible’).one(‘webkitTransitionEnd%20otransitionend%20oTransitionEnd%20msTransitionEnd%20transitionend’%2C%20function()%7B%0D%0A%09%09%09animateLayer(actionBtn.next(‘.cd-modal-bg’)%2C%20scaleValue%2C%20true)%3B%0D%0A%09%09%7D)%3B%0D%0A%0D%0A%09%09%2F%2Fif%20browser%20doesn’t%20support%20transitions…%0D%0A%09%09if(actionBtn.parents(‘.no-csstransitions’).length%20%3E%200%20)%20animateLayer(actionBtn.next(‘.cd-modal-bg’)%2C%20scaleValue%2C%20true)%3B%0D%0A%09%7D)%3B%0D%0A%0D%0A%09%2F%2Ftrigger%20the%20animation%20-%20close%20modal%20window%0D%0A%09%24(‘.cd-section%20.cd-modal-close’).on(‘click’%2C%20function()%7B%0D%0A%09%09closeModal()%3B%0D%0A%09%7D)%3B%0D%0A%09%24(document).keyup(function(event)%7B%0D%0A%09%09if(event.which%3D%3D’27’)%20closeModal()%3B%0D%0A%09%7D)%3B%0D%0A%0D%0A%09%24(window).on(‘resize’%2C%20function()%7B%0D%0A%09%09%2F%2Fon%20window%20resize%20-%20update%20cover%20layer%20dimention%20and%20position%0D%0A%09%09if(%24(‘.cd-section.modal-is-visible’).length%20%3E%200)%20window.requestAnimationFrame(updateLayer)%3B%0D%0A%09%7D)%3B%0D%0A%0D%0A%09function%20retrieveScale(btn)%20%7B%0D%0A%09%09var%20btnRadius%20%3D%20btn.width()%2F2%2C%0D%0A%09%09%09left%20%3D%20btn.offset().left%20%2B%20btnRadius%2C%0D%0A%09%09%09top%20%3D%20btn.offset().top%20%2B%20btnRadius%20-%20%24(window).scrollTop()%2C%0D%0A%09%09%09scale%20%3D%20scaleValue(top%2C%20left%2C%20btnRadius%2C%20%24(window).height()%2C%20%24(window).width())%3B%0D%0A%0D%0A%09%09btn.css(‘position’%2C%20’fixed’).velocity(%7B%0D%0A%09%09%09top%3A%20top%20-%20btnRadius%2C%0D%0A%09%09%09left%3A%20left%20-%20btnRadius%2C%0D%0A%09%09%09translateX%3A%200%2C%0D%0A%09%09%7D%2C%200)%3B%0D%0A%0D%0A%09%09return%20scale%3B%0D%0A%09%7D%0D%0A%0D%0A%09function%20scaleValue(%20topValue%2C%20leftValue%2C%20radiusValue%2C%20windowW%2C%20windowH)%20%7B%0D%0A%09%09var%20maxDistHor%20%3D%20(%20leftValue%20%3E%20windowW%2F2)%20%3F%20leftValue%20%3A%20(windowW%20-%20leftValue)%2C%0D%0A%09%09%09maxDistVert%20%3D%20(%20topValue%20%3E%20windowH%2F2)%20%3F%20topValue%20%3A%20(windowH%20-%20topValue)%3B%0D%0A%09%09return%20Math.ceil(Math.sqrt(%20Math.pow(maxDistHor%2C%202)%20%2B%20Math.pow(maxDistVert%2C%202)%20)%2FradiusValue)%3B%0D%0A%09%7D%0D%0A%0D%0A%09function%20animateLayer(layer%2C%20scaleVal%2C%20bool)%20%7B%0D%0A%09%09layer.velocity(%7B%20scale%3A%20scaleVal%20%7D%2C%20400%2C%20function()%7B%0D%0A%09%09%09%24(‘body’).toggleClass(‘overflow-hidden’%2C%20bool)%3B%0D%0A%09%09%09(bool)%20%0D%0A%09%09%09%09%3F%20layer.parents(‘.cd-section’).addClass(‘modal-is-visible’).end().off(‘webkitTransitionEnd%20otransitionend%20oTransitionEnd%20msTransitionEnd%20transitionend’)%0D%0A%09%09%09%09%3A%20layer.removeClass(‘is-visible’).removeAttr(%20’style’%20).siblings(‘%5Bdata-type%3D%22modal-trigger%22%5D’).removeClass(‘to-circle’)%3B%0D%0A%09%09%7D)%3B%0D%0A%09%7D%0D%0A%0D%0A%09function%20updateLayer()%20%7B%0D%0A%09%09var%20layer%20%3D%20%24(‘.cd-section.modal-is-visible’).find(‘.cd-modal-bg’)%2C%0D%0A%09%09%09layerRadius%20%3D%20layer.width()%2F2%2C%0D%0A%09%09%09layerTop%20%3D%20layer.siblings(‘.btn’).offset().top%20%2B%20layerRadius%20-%20%24(window).scrollTop()%2C%0D%0A%09%09%09layerLeft%20%3D%20layer.siblings(‘.btn’).offset().left%20%2B%20layerRadius%2C%0D%0A%09%09%09scale%20%3D%20scaleValue(layerTop%2C%20layerLeft%2C%20layerRadius%2C%20%24(window).height()%2C%20%24(window).width())%3B%0D%0A%09%09%0D%0A%09%09layer.velocity(%7B%0D%0A%09%09%09top%3A%20layerTop%20-%20layerRadius%2C%0D%0A%09%09%09left%3A%20layerLeft%20-%20layerRadius%2C%0D%0A%09%09%09scale%3A%20scale%2C%0D%0A%09%09%7D%2C%200)%3B%0D%0A%09%7D%0D%0A%0D%0A%09function%20closeModal()%20%7B%0D%0A%09%09var%20section%20%3D%20%24(‘.cd-section.modal-is-visible’)%3B%0D%0A%09%09section.removeClass(‘modal-is-visible’).one(‘webkitTransitionEnd%20otransitionend%20oTransitionEnd%20msTransitionEnd%20transitionend’%2C%20function()%7B%0D%0A%09%09%09animateLayer(section.find(‘.cd-modal-bg’)%2C%201%2C%20false)%3B%0D%0A%09%09%7D)%3B%0D%0A%09%09%2F%2Fif%20browser%20doesn’t%20support%20transitions…%0D%0A%09%09if(section.parents(‘.no-csstransitions’).length%20%3E%200%20)%20animateLayer(section.find(‘.cd-modal-bg’)%2C%201%2C%20false)%3B%0D%0A%09%7D%0D%0A%7D)%3B” provider=”manual” lang=”default”/]
Output:
