Responsive modal window

Developer

Size

9,264 Kb

Views

12,138

Responsive modal window Previews
Responsive modal window HTML Codes
Responsive modal window CSS Codes
Responsive modal window JS Codes

How do I make an responsive modal window?

Example demonstrates interesting hover effect and use modal window. Demo is fully responsive.. What is a responsive modal window? How do you make a responsive modal window? This script and codes were developed by Jonathan De Jesús on 24 November 2022, Thursday.

Responsive modal window Previews

Responsive modal window - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive modal window</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapperMain">
<section id="amazingTeam" class="clear"> <div class="containerContent"> <div class="set_size_section1"> <h2 class="services_h2 center">OUR AMAZING TEAM</h2> <p class="services_p center">lorem ipsum lorem ipsum lorem</p> <article class="article_center4"> <div class="md-modal md-effect-9" id="modal-9"> <div class="md-content"> <h3>Contact information</h3> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <article class="section4_article article1"> <div class="itemli"> <div class="ch-item"> <!-- <img src="images/ourAmazingTeam_1.png"/>--> <div class="ch-info"> <div class="ch-info-front ch-img-1"> </div> <div class="ch-info-back"> <h3>Brain</h3> <!--<p>Visit my personal<a class="md-trigger">Website</a></p>--> <p>Contact information<a class="md-trigger" id="idPerson1">Here</a> </p> </div> </div> </div> </div> <h3>Rico Massimo</h3> <p>Coder</p> <ul class="icon"> <li class="icon_twitter "></li> <li class="icon_fb"></li> <li class="icon_google"></li> </ul> </article> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <article class="section4_article"> <div class="itemli"> <div class="ch-item"> <!-- <img src="images/ourAmazingTeam_1.png"/>--> <div class="ch-info"> <div class="ch-info-front ch-img-2"></div> <div class="ch-info-back"> <h3>Heart</h3> <p>Contact information<a class="md-trigger" id="idPerson2">Here</a> </p> </div> </div> </div> </div> <h3>Kimberly Thompson</h3> <p>Marketer</p> <ul class="icon"> <li class="icon_twitter "></li> <li class="icon_fb"></li> <li class="icon_pinterest"></li> </ul> </article> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <article class="section4_article"> <div class="itemli"> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-3"></div> <div class="ch-info-back"> <h3>Soul</h3> <p>Contact information<a class="md-trigger" id="idPerson3">Here</a> </p> </div> </div> </div> </div> <h3>Uku Mason</h3> <p>Graphic Designer</p> <ul class="icon"> <li class="icon_google "></li> <li class="icon_pinterest"></li> </ul> </article> </div> </div> <p class="services_p_team center clear">Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt proin iaculis.</p> </article> </div> </div> <div class="md-overlay"></div>
</section> <footer> <div class="about-me-img"> <a href="http://www.jakubtursky.sk" target="_blank"> <img src="http://www.jakubtursky.sk/public/images/logo-brand-shadow-logo.png" alt="Jakub Turský" width="120px" > </a> <div class="authorWindowWrapper"> <div class="authorWindow"> <p><strong>Responsive modal window </strong><br> Created by - <a href="http://www.jakubtursky.sk" target="_blank"><strong>Jakub Turský</strong></a> <br> For next info about me you can visit me site - <a href="http://www.jakubtursky.sk" target="_blank"> www.jakubtursky.sk </a> <br> </p> </div> </div> </div>
</footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive modal window - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300');
/*IE8, IE9*/
.displayNone{ display: none;
}
.services_p {
font-family: 'Droid Serif ';
/* font-style: italic; */
font-size: 17px;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; vertical-align: baseline;
}
html,body { width: 100%; height: 100%;
}
body { background: #FFF; color: #666; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 100%;
}
table { border-collapse: collapse; border-spacing: 0;
}
fieldset,img { border: 0;
}
.containerContent { margin: 0 auto; width: 100%; max-width: 1400px;
}
ul { list-style: none; list-style-position: outside;
}
a { outline: none;
}
header, nav, section, article, aside, footer { display: block;
}
p { line-height: 150%;
}
a:link,a:visited { text-decoration: none;
}
.clear { clear: both;
}
.center { text-align: center;
}
article.feature_text h1 { font-size: 35px; color: #FFF; margin: 0 0 30px 0; text-align: center; font-family: 'Droid Serif Regular', serif; opacity: 0;
}
article.feature_text h2 { font-size: 65px; color: #FFF; margin: 0 0 40px 0; text-align: center; font-family: 'Montserrat', sans-serif; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);
}
article.feature_text a { display: block; width: 240px; height: 62px; color: #FFF; text-align: center; line-height: 60px; margin: 0 auto; text-decoration: none; font-weight: lighter; font-size: 20px; background-color: #fed136; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); font-family: 'Montserrat',sans-serif;
}
article.feature_text a:active { color: #EFEFEF;
}
/*GENERAL SECTION SETTINGS*/
section { width: 100%;
}
#amazingTeam { padding: 20px 0px 50px 0px; position: relative; display: block; background: #f7f7f7;
}
.set_size_section1 { margin-left: auto; margin-right: auto; width: 100%; display: inline-block;
}
.set_size_section7 { width: 100%; display: block;
}
/*****************************************************************************************************************/
/* SECTION 4 - our amazing team*/
#amazingTeam article { margin: 0 auto; text-align: center; text-transform: none; z-index: 1; -ms-transition: opacity 0.4s linear, -ms-transform 0.4s ease-in-out, -ms-box-shadow 0.4s ease-in-out; -moz-transition: opacity 0.4s linear, -moz-transform 0.4s ease-in-out, -moz-box-shadow 0.4s ease-in-out; -o-transition: opacity 0.4s linear, -o-transform 0.4s ease-in-out, -o-box-shadow 0.4s ease-in-out; -webkit-transition: opacity 0.4s linear, -webkit-transform 0.4s ease-in-out, -webkit-box-shadow 0.4s ease-in-out; transition: opacity 0.4s linear, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden;
}
.itemli{ width: 230px; height: 230px; display: inline-block;
}
.section4_article img { margin-bottom: 25px; width: 180px;
}
.section4_article > h3 { font-family: 'MontserratBold', sans-serif; /*font-weight: bold;*/ color: black; margin-bottom: 3%; font-size: 18px;
}
.section4_article > p {
font-family: 'RobotoSlab', serif;
word-spacing: 1px;
font-size: 18px;
}
.article_center4 { width: 65%; margin: 0 auto;
}
.icon { display: inline-block; margin-top: 10px;
}
.icon_twitter { height: 50px; width: 50px; background: url('http://www.vivebooks.com/site/wp-content/themes/vivebooks/images/twitter.png') no-repeat; float: left; cursor: pointer;
}
.icon_google { height: 50px; width: 50px; background: url('https://www.nataliebarneyjewellery.com.au/wp-content/uploads/2014/06/icon-gplus.png') no-repeat; float: left; cursor: pointer;
}
.icon_fb { height: 50px; width: 50px; background: url('http://www.adoptivefamiliescircle.com/images/site_images/facebook-circle-35.png') no-repeat; float: left; cursor: pointer;
}
.icon_pinterest { height: 50px; width: 50px; background: url('https://www.oxondigital.co.uk//wp-content/uploads/2012/02/Pinterest-Logo-44125_40x40.png') no-repeat; float: left; cursor: pointer;
}
.icon_first { margin-left: 18%;
}
.icon_first_g { margin-left: 28%;
}
.services_p_team { font-family: 'RobotoSlab', serif; font-size: 17px; width: 70%; margin: 0 auto;
}
.ch-item { width: 100%; height: 100%; -moz-border-radius: 50%; /*behavior: url(../pie/PIE.htc);*/ -webkit-border-radius: 50%; border-radius: 50%; border: 8px solid white; position: relative; cursor: default; -webkit-perspective:900px; -moz-perspective:900px; -ms-perspective:900px; -o-perspective:900px; perspective: 900px
}
.ch-info { position: absolute; width: 100%; height: 100%; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style: preserve-3d
}
.ch-info p a::before { position: absolute; top: 100%; left: 50%; color: transparent; content: '•'; text-shadow: 0 0 transparent; font-size: 1.2em; -webkit-transition:text-shadow 0.3s, color 0.3s; -moz-transition:text-shadow 0.3s, color 0.3s; -ms-transition:text-shadow 0.3s, color 0.3s; -o-transition:text-shadow 0.3s, color 0.3s; transition:text-shadow 0.3s, color 0.3s; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);
}
.ch-info p a:hover::before,
.ch-info p a:focus::before { color: rgb(254, 209, 54); text-shadow: 10px 0 rgb(254, 209, 54), -10px 0 rgb(254, 209, 54);
}
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; /*behavior: url(../pie/PIE.htc);*/ border-radius: 50%; background-position: center center; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%
}
.ch-info .ch-info-back { -moz-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -ms-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -o-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); -webkit-transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0, 0, -220px) rotate3d(1, 0, 0, 90deg); background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0
}
.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; margin: 0 15px; padding: 60px 0 0 0; height: 110px; font-family: 'Montserrat', sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3)
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-family: 'RobotoSlab ', serif;
font-style: italic;
margin: 10px 30px;
font-size: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
text-transform: uppercase;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Montserrat', sans-serif;
position: relative;
font-weight: bold;
display: inline-block;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.0em;
-webkit-transition: color 0.3s;
-ms-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
cursor: pointer;
}
.ch-info p a:hover { color: rgb(254, 209, 54);
}
.ch-item:hover .ch-info-front { -moz-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -ms-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -o-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); -webkit-transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0, 280px, 0) rotate3d(1, 0, 0, -90deg); opacity: 0;
}
.services_h2 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: black;
margin-bottom: 5px;
margin-top: 20px;
font-size: 30px;
}
.ch-item:hover .ch-info-back { -moz-transform: rotate3d(1, 0, 0, 0deg); -ms-transform: rotate3d(1, 0, 0, 0deg); -o-transform: rotate3d(1, 0, 0, 0deg); -webkit-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;
}
.ch-img-1 { background: url('https://lh6.googleusercontent.com/-xDXbboZMKiA/AAAAAAAAAAI/AAAAAAAABas/GC6cf7AvLYU/photo.jpg');
}
.ch-img-2 { background: url('https://lh3.googleusercontent.com/-G-cmOndZrlg/AAAAAAAAAAI/AAAAAAAAAAA/5UeICGDEsGo/photo.jpg');
}
.ch-img-3 { background: url('https://lh3.googleusercontent.com/-G-cmOndZrlg/AAAAAAAAAAI/AAAAAAAAAAA/5UeICGDEsGo/photo.jpg');
}
/*****************************************************************************************************************/
/* MEDIA QUERIES */
@media(min-width: 300px) {
.section_center5 { width: 80%;
}
/*.icon2 { margin-left: 35px;
}*/
#portfolio .folio-list { width: 80%;
}
#aboutUs .section3_article p { width: 74px; font-size: 10px;
}
#aboutUs .section3_article img { margin: 0% -5% 0% 4%; width: 100px; height: 100px; border: 7px solid #f1f1f1
}
#aboutUs .section3_article_line img { margin-top: -107px; height: 400px;
}
.article_center1 { width: 100%;
}
#aboutUs .section3_article h3 { font-size: 12px; width: 74px;
}
#aboutUs .section3_article_reverse p { width: 66px; font-size: 10px;
}
#aboutUs .section3_article_reverse img { margin: 0% 6% 100% -7%; width: 100px; height: 100px; border: 7px solid #f1f1f1
}
#aboutUs .section3_article_reverse h3 { font-size: 12px; width: 66px;
}
.section3_img{ width: 100px; height: 100px;
}
#aboutUs .section3_article_reverse_last p { font-size: 11px; margin-top: 16%;
}
.diy-slideshow > li { height: 500px;
}
.diy-slideshow { height: 500px;
}
.welcome { margin: 170px auto 0px auto; width: 65%;
}
.arrow .next, .arrow .prev { height: 50px; width: 50px;
}
article.feature_text h1{ font-size: 20px;
}
article.feature_text h2{ font-size: 30px;
}
article.feature_text a{ width: 190px;
}
.article_center4{ width: 80%;
}
.article_center4 .md-modal { width: 280px; height: auto;
}
.article_center4 .md-content > div ul li { font-size: 14px;
}
.article_center4 .md-content > div { padding: 15px 5px 30px;
}
}
@media(min-width: 460px) {
.section_center5 { width: 75%;
}
/*.icon2 { margin-left: 100px;
}*/
/*#footer p { text-align: center; width: 100%;
}*/
#portfolio .folio-list { width: 70%;
}
#aboutUs .section3_article p { width: 107px; font-size: 12px;
}
#aboutUs .section3_article img { margin: 0% -3% 0% 6%; width: 140px; height: 140px; border: 7px solid #f1f1f1
}
#aboutUs .section3_article_line img { margin-top: -66px; height: 400px;
}
.article_center1 { width: 100%;
}
#aboutUs .section3_article h3 { font-size: 13px; width: 107px;
}
#aboutUs .section3_article_reverse p { width: 105px; font-size: 12px;
}
#aboutUs .section3_article_reverse img { margin: 0% 6% 0% -7%; width: 140px; height: 140px; border: 7px solid #f1f1f1
}
#aboutUs .section3_article_reverse h3 { font-size: 13px; width: 105px;
}
.section3_img{ width: 140px; height: 140px;
}
#aboutUs .section3_article_reverse_last p { font-size: 15px; margin-top: 20%;
}
.diy-slideshow > li { height: 500px;
}
.diy-slideshow { height: 500px;
}
.welcome { margin: 170px auto 0px auto; width: 70%;
}
.arrow .next, .arrow .prev { height: 50px; width: 50px;
}
article.feature_text h1{ font-size: 25px;
}
article.feature_text h2{ font-size: 35px;
}
article.feature_text a{ width: 240px;
}
.article_center4{ width: 70%;
}
.article_center4 .md-modal { width: 320px; height: auto;
}
.article_center4 .md-content > div ul li { font-size: 15px;
}
.article_center4 .md-content > div { padding: 15px 20px 30px;
}
}
@media (min-width: 630px) {
.section_center5 { width: 70%;
}
.col_half { width: 70%; margin: 0px auto 18px auto;
}
.form_row2 { width: 72%; margin: 0 auto;
}
/*.icon2 { margin-left: 8%;
}*/
/*#footer p { text-align: left; width: 255px;
}*/
#aboutUs .section3_article p { width: 175px; font-size: 12px;
}
#aboutUs .section3_article img { margin: 0% -5% 0% 6%; width: 180px; height: 180px;
}
#aboutUs .section3_article_line img { margin-top: -26px; height: 190px;
}
.article_center1 { width: 100%;
}
#aboutUs .section3_article h3 { font-size: 13px; width: 179px;
}
#aboutUs .section3_article_reverse p { width: 168px; font-size: 12px;
}
#aboutUs .section3_article_reverse img { margin: 0% 6% 0% -7%; width: 180px; height: 180px;
}
#aboutUs .section3_article_reverse h3 { font-size: 13px; width: 168px;
}
.section3_img{ width: 180px; height: 180px;
}
#aboutUs .section3_article_reverse_last p { font-size: 17px;
}
.diy-slideshow > li { height: 500px;
}
.diy-slideshow { height: 500px;
}
.welcome { margin: 170px auto 0px auto;
}
.arrow .next, .arrow .prev { height: 50px; width: 50px;
}
article.feature_text h1{ font-size: 30px;
}
article.feature_text h2{ font-size: 50px;
}
.article_center4 .md-modal { width: 350px; height: auto;
}
.article_center4 .md-content > div ul li { font-size: 16px;
}
.article_center4 .md-content > div { padding: 15px 25px 30px;
}
}
@media (min-width: 768px) {
.section_center5 { width: 65%;
}
#aboutUs .section3_article p { width: 175px; font-size: 12px;
}
#aboutUs .section3_article img { margin: 0% -2% 0% 6%; width: 200px; height: 200px;
}
#aboutUs .section3_article_line img { margin-top: -6px; height: 175px;
}
.article_center1 { width: 90%;
}
.article_center2 > div:last-child, #amazingTeam .article_center4 > div:nth-child(4){ float: center; clear: both; margin: 0 auto;
}
#aboutUs .section3_article h3 { font-size: 13px; width: 179px;
}
#aboutUs .section3_article_reverse p { width: 173px; font-size: 12px;
}
#aboutUs .section3_article_reverse img { margin: 0% 6% 0% -4%; width: 200px; height: 200px;
}
#aboutUs .section3_article_reverse h3 { font-size: 13px; width: 170px;
}
.section3_img{ width: 200px; height: 200px;
}
#aboutUs .section3_article_reverse_last p { font-size: 18px;
}
.diy-slideshow > li { height: 765px;
}
.diy-slideshow { height: 765px;
}
.welcome { margin: 300px auto 0px auto;
}
.arrow .next, .arrow .prev { height: 70px; width: 70px;
}
article.feature_text h1{ font-size: 30px;
}
article.feature_text h2{ font-size: 50px;
}
.article_center4 .md-modal { width: 400px; height: auto;
}
.article_center4 .md-content > div ul li { font-size: 19px;
}
.article_center4 .md-content > div { padding: 15px 40px 30px;
}
}
@media (min-width: 980px) {
.section_center5 { width: 60%;
}
.col_half { width: 100%;
}
.form_row2 { width: 100%;
}
#aboutUs .section3_article p { width: 230px; font-size: 14px;
}
#aboutUs .section3_article img { margin: 0% 0% 0% 6%;
}
#aboutUs .section3_article_line img { height: 220px;
}
.article_center1 { width: 80%;
}
.article_center2 > div:last-child, #amazingTeam .article_center4 > div:nth-child(4){ float: left; clear: none; margin: 0 auto;
}
#aboutUs .section3_article h3 { font-size: 16px; width: 219px;
}
#aboutUs .section3_article_reverse p { width: 212px; font-size: 14px;
}
#aboutUs .section3_article_reverse img { margin: 0% 6% 0% 0%;
}
#aboutUs .section3_article_reverse h3 { font-size: 16px; width: 209px;
}
article.feature_text h1{ font-size: 35px;
}
article.feature_text h2{ font-size: 58px;
}
.welcome { margin: 270px auto 0px auto;
}
}
@media only screen and (min-width: 1201px) {
.modern { width: 220px; height: 55px; font-size: 20px;
}
.article_center1 { width: 960px;
}
#aboutUs .section3_article p { width: 330px;
}
#aboutUs .section3_article img { margin: 0% 3% 0% 4%;
}
#aboutUs .section3_article_line img { height: 168px;
}
#aboutUs .section3_article_reverse img { margin: 0% 6% 0% 0%;
}
#aboutUs .section3_article_reverse p { width: 307px;
}
article.feature_text h1{ font-size: 35px;
}
article.feature_text h2{ font-size: 65px;
}
.navbar-inverse{ width: 100%;
}
}
@media only screen and (min-width: 1400px) {
.navbar-inverse{ margin: 0 auto 0 auto;
}
}
/*****************************************************************************************************************/
/* SECTION 4 - MODAL VIEW WINDOW */
.md-modal { position: fixed; top: 50%; left: 50%; width: 400px; height: auto; z-index: 1000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility: hidden; -moz-transform: translatex(-50%) translatey(-50%); -ms-transform: translatex(-50%) translatey(-50%); -o-transform: translatex(-50%) translatey(-50%); -webkit-transform: translatex(-50%) translatey(-50%); transform: translatex(-50%) translatey(-50%);
}
.md-show { visibility: visible;
}
.md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 800; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; background: rgba(247, 247, 247, 0.8); -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: default;
}
.md-overlay-show { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; visibility: visible; cursor:pointer; cursor: url("https://cdn0.iconfinder.com/data/icons/app-tab-bar-icons-for-iphone/30/Undo_arrow_left_edit_back_cancel_rotate_delete_return_remove.png"), auto;
}
.md-perspective, .md-perspective body { height: 100%; overflow: hidden
}
.md-perspective body { background: #222; -webkit-perspective:600px; -moz-perspective:600px; -ms-perspective:600px; -o-perspective:600px; perspective: 600px
}
.md-effect-9.md-modal { -webkit-perspective: 1300px; -moz-perspective: 1300px; -ms-perspective:1300px; -o-perspective:1300px; perspective: 1300px;
}
.md-effect-9 .md-content { /*transform-style*/ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; /*transform*/ -webkit-transform:rotateX(-70deg); -moz-transform:rotateX(-70deg); -ms-transform:rotateX(-70deg); -o-transform:rotateX(-70deg); transform:rotateX(-70deg); /*transition*/ -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);
}
.md-show.md-effect-9 .md-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -o-transform:rotateX(0deg); transform: rotateX(0deg); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100);
}
.md-content { color: #000; background: #FFFFFF; position: relative; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius: 3px; /*behavior: url(../pie/PIE.htc);*/ margin: 0 auto;
}
.md-content h3 { margin: 0; padding: 0.4em; text-align: center;
font-size: 2.0em;
font-weight: bold;
font-family: 'Montserrat', sans-serif; /*font-weight: bold;*/ background: rgba(254, 209, 54, 1); -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; /*behavior: url(../pie/PIE.htc);*/
}
.md-content > div { padding: 15px 40px 30px; margin: 0; font-weight: 300; font-size: 1.15em;
}
.md-content > div p { margin: 0; font-size: 20px; /* font-weight: bold;*/ padding: 10px 0; font-weight: bold; font-family: 'RobotoSlab', serif; text-align: center;
}
.md-content > div ul { margin: 0 auto; padding: 0px 0 30px 20px;
}
.md-content > div ul li { padding: 5px 0; font-family: 'RobotoSlab', serif; font-size: 19px; text-align: left;
}
.md-content > div ul li strong{ margin-right: 5px;
}
.md-content button { display: block; margin: 0 auto; font-size: 0.8em;
}
.md-modal button { border: none; padding: 0.6em 1.2em; background: rgb(254, 209, 54);
font-family: "Montserrat", sans-serif;
font-size: 1.2em; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: inline-block; cursor: pointer; text-decoration: none; outline: none; color: #fff; -webkit-background-clip: padding-box; -ms-background-clip: padding-box; background-clip: padding-box; -moz-transition: -moz-box-shadow 0.3s; -o-transition: -o-box-shadow 0.3s; -ms-transition: -ms-box-shadow 0.3s; -webkit-transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; -ms-transition: -moz-box-shadow 0.3s; -moz-transition: -moz-box-shadow 0.3s; -o-transition: -o-box-shadow 0.3s; -webkit-transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s }
.md-modal button:hover { -moz-box-shadow: 0 0 0 3px #FFF, 0 0 0 6px #f89f05; -webkit-box-shadow: 0 0 0 3px #FFF, 0 0 0 6px #f89f05; box-shadow: 0 0 0 3px #FFF, 0 0 0 6px #f89f05; background-color: #f89f05; -moz-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -o-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8); -webkit-animation: gelatine 0.5s 1; animation: gelatine 0.5s 1; }
@keyframes gelatine { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
@-webkit-keyframes gelatine { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); } from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1); } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9); } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05); }
}
/*****************************************************************************************************************/
.btnn:after {
content: '';
position: absolute;
top: 3px;
font-size: 28px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Pseudo elements for icons */
.btnn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: relative; -webkit-font-smoothing: antialiased;
}
.icon-envelope:before {
content: "\e000";
}
.btnn-7h:before {
position: absolute;
top: 15px;
font-size: 160%;
line-height: 0.8;
color: white;
}
.btnn-success,
.btnn-error { color: transparent;
}
.btnn-success:after,
.btnn-error:after {
z-index: 1;
color: #fff;
left: 40%;
}
.btnn-error { -webkit-animation: shake 0.5s; -moz-animation: shake 0.5s; animation: shake 0.5s;
}
/* From Dan Eden's animate.css: https://daneden.me/animate/ */
@-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake { 0%, 100% {-moz-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.btnn-error:before { content: "\e601"; color: #bb0000;
}
.btnn-error:after { content: "Error!"; color: #bb0000; -webkit-animation: scaleFromUp 0.5s; -moz-animation: scaleFromUp 0.5s; animation: scaleFromUp 0.5s;
}
@-webkit-keyframes scaleFromUp { 0% { -webkit-transform: scale(0); opacity: 0; } 100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes scaleFromUp { 0% { -moz-transform: scale(0); opacity: 0; } 100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes scaleFromUp { 0% { transform: scale(0); opacity: 0; } 100% { opacity: 1; transform: scale(1); }
}
.btnn-success:before { content: "\e604"; color:#2ABE4E;
}
.btnn-success:after { content: "Success!"; color:#2ABE4E; -webkit-animation: moveUp 0.5s; -moz-animation: moveUp 0.5s; animation: moveUp 0.5s;
}
@-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(50%); opacity: 0; } 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes moveUp { 0% { -moz-transform: translateY(50%); opacity: 0; } 100% { opacity: 1; -moz-transform: translateY(0); }
}
@keyframes moveUp { 0% { transform: translateY(50%); opacity: 0; } 100% { opacity: 1; transform: translateY(0); }
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 50px;
margin-top: 50px;
line-height: 1.42857143;
background-color: rgba(255,255,255,0) !important;
border: none !important;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.wrapperMain { min-height: 100%; position: relative;
}
/* AUTHOR LINK */
footer{ z-index: 100; padding-top: 50px; padding-bottom: 50px; width: 100%; bottom: 0; left: 0;
}
footer p {
color: rgba(255, 255, 255, 0.8); font-size: 16px; opacity: 0; font-family: 'Open Sans'; width: 100%; word-wrap: break-word; line-height: 25px; -webkit-transform: translateX(-200px); transform: translateX(-200px); margin: 0; -webkit-transition: all 250ms ease; -moz-transition: all 250ms ease; transition: all 250ms ease;
}
footer .authorWindow a{ color: white; text-decoration: none;
}
footer p strong { color: rgba(255, 255, 255, 0.9);
}
.about-me-img { width: 120px; height: 120px; left: 10px; /* bottom: 30px; */ position: relative; border-radius: 100px;
}
.about-me-img img {
}
.authorWindow{ width: 600px; background: #75439a; padding: 22px 20px 22px 20px; border-radius: 5px; overflow: hidden;
}
.authorWindowWrapper{ display: none; left: 110px; top: 0; padding-left: 25px; position: absolute;
}
.trans{ opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease;
}
@media screen and (max-width: 768px) { .authorWindow{ width: 210px; } .authorWindowWrapper{ bottom: -170px; margin-bottom: 20px; } footer p{ font-size: 14px; }
}

Responsive modal window - Script Codes JS Codes

$(document).ready(function() { $(".md-content").append("<div></div>"); var mailAddress = new Array("[email protected]", "[email protected]", "[email protected]"); var phoneNumber = new Array("0907 447 033", "0915 569 126", "0919 566 742"); var webSite = new Array("www.ricomassimo.com", "www.kimthompson.com", "www.ukumason.com"); var currentPerson, personAddress, personPhoneNumber, personWebSite; $('#amazingTeam .ch-info-back a').on("click", function() { $('.md-overlay').addClass('md-overlay-show'); $('.md-modal').addClass('md-show'); $('md-content', '.md-modal').addClass('md-show.md-effect-9 .md-content'); var $h3SelectName = $(this).closest('.section4_article').find(this + " > h3").html(); var $selectParentContent = $(this).closest('.article_center4').find(".md-content div"); $('#appendDiv').remove(); currentPerson = $(this).attr('id'); switch (currentPerson) { case "idPerson1": personAddress = mailAddress[0]; personPhoneNumber = phoneNumber[0]; personWebSite = webSite[0]; break; case "idPerson2": personAddress = mailAddress[1]; personPhoneNumber = phoneNumber[1]; personWebSite = webSite[1]; break; case "idPerson3": personAddress = mailAddress[2]; personPhoneNumber = phoneNumber[2]; personWebSite = webSite[2]; break; } var textToInsert = []; var i = 0; textToInsert[i++] = '<div id="appendDiv">'; textToInsert[i++] = '<p></p>'; textToInsert[i++] = '<ul><li><strong>Mail:</strong>'; textToInsert[i++] = personAddress + '</li><li><strong>Phone number:</strong>'; textToInsert[i++] = personPhoneNumber + '</li><li><strong>Website:</strong><a>'; textToInsert[i++] = personWebSite + '</a></li></ul><button class=".md-close">Close me</button><div>'; $($selectParentContent).append(textToInsert.join('')); $(".md-content > div p").text($h3SelectName); return false; }); $('div', '.md-content').on("click", "button", function() { removeModalViewClass(); return false; }); $('.md-overlay').on("click", function() { removeModalViewClass(); return false; }); function removeModalViewClass() { $('.md-overlay').removeClass('md-overlay-show'); $('.md-modal').removeClass('md-show'); $('.md-modal md-content').removeClass('md-show.md-effect-9 .md-content'); } /*****************************************************************/	/* AUTHOR LINK */ $('.about-me-img').hover(function(){ $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans'); }, function(){ $('.authorWindowWrapper').stop().fadeOut('fast').find('p').removeClass('trans'); }); });

Home Page	Home
Developer	Jonathan De Jesús
Username	JonathanDeJesus
Uploaded	November 24, 2022
Rating	3
Size	9,264 Kb
Views	12,138

Do you need developer help for Responsive modal window?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jonathan De Jesús (JonathanDeJesus) Script Codes

Name	Size
Blog design idea	2,787 Kb
My first pen	1,705 Kb
Personal site	3,915 Kb
Case Studies	7,824 Kb
Enveer	1,372 Kb
Daily UI Sign Up	1,384 Kb
Color	1,931 Kb
Moises	1,476 Kb
Css reference	2,022 Kb
JS	2,028 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Navier Stoke Fluid Simulation	Esimov	8,584 Kb
Scroll Arrow	Robooneus	4,437 Kb
Wikipedia viewer	Chpecson	2,865 Kb
About Us	Francescaedits	1,902 Kb
Coburg Banks SVG Logo	Mjtweaver	3,875 Kb
A Pen by Gregory Potdevin	GregoryPotdevin	1,713 Kb
Two joint circles - One element	Berdejitendra	1,704 Kb
Preloader	Rikki_Sixx	2,815 Kb
Popup Modal	Aldlevine	3,696 Kb
A Pen by Theun	Tjoen	6,152 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!