Use [fadeOut()][1] [hide()][2] <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(document).ready( function() { $('.popScroll').delay(20000).fadeOut(); $("#close").click(function(){ $('.popScroll').hide(); }); }); <!-- language: lang-css --> .popScroll { position:fixed; z-index:10; top:0; display: table; text-align: center; width: 100%; height: 100%; } .popup { z-index: 10; width:450px; height:280px; position:relative; margin:220px auto; display:block; text-align:center; -moz-background-clip: padding; -o-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /* prevents bg color from leaking outside the border */ background-color: #fff; /* layer fill content */ -moz-box-shadow: 0 0 10px rgba(0,0,0,.18); /* drop shadow */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,.18); /* drop shadow */ -o-box-shadow: 0 0 10px rgba(0,0,0,.18); /* drop shadow */ box-shadow: 0 0 10px rgba(0,0,0,.18); /* drop shadow */ -webkit-transform-origin:top center; -moz-transform-origin:top center; -o-transform-origin:top center; transform-origin:top center; -webkit-animation: iconosani 1.2s forwards; animation: iconosani 1.2s forwards; -moz-animation: iconosani 1.2s forwards; -o-animation: iconosani 1.2s forwards; } @-webkit-keyframes iconosani { 0% { -webkit-transform: perspective(800px) rotateX(-90deg); -moz-transform: perspective(800px) rotateX(-90deg); -o-transform: perspective(800px) rotateX(-90deg); opacity: 1; } 40% { -webkit-transform: perspective(800px) rotateX(30deg); -moz-transform: perspective(800px) rotateX(30deg); -o-transform: perspective(800px) rotateX(30deg); opacity: 1; } 70% { -webkit-transform: perspective(800px) rotateX(-10deg); -moz-transform: perspective(800px) rotateX(-10deg); -o-transform: perspective(800px) rotateX(-10deg); } 100% { -webkit-transform: perspective(800px) rotateX(0deg); -moz-transform: perspective(800px) rotateX(0deg); -o-transform: perspective(800px) rotateX(0deg); opacity: 1; } } .popScroll h1 { height: 60px; position: relative; color: #fff; font: 18px/60px sans-serif; text-align: center; text-transform: uppercase; background: #e318d0; } .popScroll form{ margin:10px auto; } .subscribe-widget .email-form { font-size: 13px; color: #999999; width: 320px; height:50px; border: 1px solid #e0e0e0; padding: 5px 0 5px 15px; line-height: 25px; margin-left: 10px; } .subscribe-widget .button { background: #e318d0; color: #fff; border: none; line-height: 25px; width:100px; height:50px; display: block; margin: -50px 0 0 330px; } input[type="submit"] { -webkit-appearance: button; -moz-appearance: button; -o-appearance: button; cursor: pointer; } .popScroll p { padding: 1px 5px; font-family: 'Open Sans'; font-size: 17px; margin-bottom: 10px; } #option { position: relative; } .boxi { display: inline-block; width: 169px; line-height: 42px; color: #fff; text-align: center; text-decoration: none; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; } #home { background: #e318d0; } #close { background: #D21111; } .popScroll em { width: 42px; display: inline-block; position: relative; margin: 0 -20px; line-height: 42px; background: #fff; color: #777; text-align: center; border-radius: 50px; } #home:hover { background: #e316a0; color:#fff; } #close:hover { background: #e318d0; color:#fff; } body.overlay:after{ content:''; width:100%; height:100%; top:0px; left:0px; z-index:0; opacity:.8; position:fixed; top:0; left:0; bottom:0; right:0; background:#000; } body.overlay{ /* Prevents scrolling */ overflow:hidden; max-height:100%; max-width:100%; } .ribbon { position: absolute; z-index: 100; width: 100px; height: 100px; overflow: hidden; } .ribbon.top-left { top: -2.6px; left: -5px; } .ribbon.top-left.ribbon-primary > small:before, .ribbon.top-left.ribbon-primary > small:after { position: absolute; content: " "; } .ribbon.top-left.ribbon-primary > small:before { left: 0; } .ribbon.top-left.ribbon-primary > small:after { right: 0; } .ribbon.top-left.ribbon-primary > small:before, .ribbon.top-left.ribbon-primary > small:after { bottom: -3px; border-top: 3px solid #e318d0; border-left: 3px solid transparent; border-right: 3px solid transparent; } .banner { width:300px; height:250px; position:relative; margin:10px auto; display:block; text-align:center; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /* prevents bg color from leaking outside the border */ background-color: #fff; /* layer fill content */ -moz-box-shadow: 0 0 10px rgba(0,0,0,.18); /* drop shadow */ -webkit-box-shadow: 0 0 10px rgba(0,0,0,.18); /* drop shadow */ box-shadow: 0 0 10px rgba(0,0,0,.18); /* drop shadow */ } .adstext { margin-top:20px; color:#000; position:relative; } @media screen and (max-width: 600px) { .popup { width:370px; height:480px; } .popScroll h1 { height: 40px; font: 18px/40px sans-serif; } .subscribe-widget .email-form { width:210px; } .adstext { margin-top:20px; } } @media screen and (max-width: 400px) { .popup { width:350px; height:480px; } .popScroll h1 { height: 40px; font: 18px/40px sans-serif; } .subscribe-widget .email-form { width:210px; } .banner { margin:10px auto; } .adstext { margin-top:20px; } } input.email-form:active, input.email-form:focus { -webkit-animation: fade 0.55s ease-in; -moz-animation: fade 0.55s ease-in; animation: fade 0.55s ease-in; } @-webkit-keyframes fade { 0% { box-shadow: 0 0 0 0 transparent; } 66% { box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white; } 100% { box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent; } } @-moz-keyframes fade { 0% { box-shadow: 0 0 0 0 transparent; } 66% { box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white; } 100% { box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent; } } @-o-keyframes fade { 0% { box-shadow: 0 0 0 0 transparent; } 66% { box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white; } 100% { box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent; } } @keyframes fade { 0% { box-shadow: 0 0 0 0 transparent; } 66% { box-shadow: 0 0 0 10px #3D79D0, 0 0 0 12px white; } 100% { box-shadow: 0 0 0 20px transparent, 0 0 0 22px transparent; } } /* POPUP */ .box { display: table; top: 0; visibility: hidden; -webkit-transform: perspective(1200px) rotateY(180deg) scale(0.1); -ms-transform: perspective(1200px) rotateY(180deg) scale(0.1); -moz-transform: perspective(1200px) rotateY(180deg) scale(0.1); transform: perspective(1200px) rotateY(180deg) scale(0.1); top: 0; left: 0; z-index: -1; position: absolute; width: 100%; height: 100%; opacity: 0; transition: 1s all; } .box p { display: table-cell; vertical-align: middle; font-size: 64px; color: #ffffff; text-align: center; margin: 0; opacity: 0; transition: .2s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .box p i { font-size: 128px; margin:0 0 20px; display:block; } .box .close { display:block; cursor:pointer; border:3px solid rgba(255, 255, 255, 1); border-radius:50%; position:absolute; top:50px; left:50px; width:50px; height:50px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); transform:rotate(45deg); transition: .2s; -webkit-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; opacity:0; } .box .close:active { top:51px; } .box .close::before { content: ""; display: block; position: absolute; background-color: rgba(255, 255, 255, 1); width: 80%; height: 6%; left: 10%; top: 47%; } .box .close::after { content: ""; display: block; position: absolute; background-color: rgba(255, 255, 255, 1); width: 6%; height: 80%; left: 47%; top: 10%; } .box.open { left: 0; top: 0; visibility: visible; opacity: 1; z-index: 999; -webkit-transform: perspective(1200px) rotateY(0deg) scale(1); -moz-transform: perspective(1200px) rotateY(0deg) scale(1); -ms-transform: perspective(1200px) rotateY(0deg) scale(1); transform: perspective(1200px) rotateY(0deg) scale(1); width: 100%; height: 100%; } .box.open .close, .box.open p { opacity: 1; } #card { font-family: Georgia; background: #fff; width: 450px; height: 185px; margin: 200px auto; padding: 10px 25px 30px 25px; border: 1px solid white; -webkit-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1); -o-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1); -moz-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1); -khtml-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1); -ms-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1); box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1); text-align: center; } #card spa { color: #dc152c; font-weight: normal; font-size: 48px; margin-bottom:10px;} #card spa::first-letter { color: #194ff7; } #card spa b { color: #f1840b; font-weight: normal; } #card spa b + b { color: #194ff7; } #card spa b + b + b { color: #00940e; } .content { text-align: left; /* Pure CSS3 typing animation with steps() : http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/ */ } .content ul { padding: 0; margin: 5px; font: 16px Arial; } .content ul li { list-style: none; } .content ul li a { color: #12C; } .content ul li span { display: block; width: 100%; margin-bottom: 2px; } .content ul li span:nth-child(2) { margin-bottom: 10px; } .content ul li span:nth-child(2) a { color: #093; text-decoration: none; } .content ul li span:nth-child(3), .content ul li span:nth-child(4) { font-size: 14px; } .content .text { border: 1px solid #7ec6fd; float: left; width: 100%; margin-bottom: 10px; } .content .text h2 { position: relative; float: left; font-size: 100%; font-weight: normal; padding: 0; margin: 5px 10px; } .content .text h2 span { position: absolute; top: 0; right: 0; width: 0; background: white; /* same as background */ border-left: 0.1em solid black; -moz-box-sizing: border-box; box-sizing: border-box; } /***************** Section ******************/ section { height: 100%; text-align: center; } section h1 { padding-top: 17%; font-family: 'Vollkorn', serif; font-size: 48px; } section p { width: 500px; margin: -28px auto 32px; font-family: 'Muli', sans-serif; font-size: 18px; line-height: 1.35; } <!-- language: lang-html --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- popup --> <div class="popScroll"> <div class="popup"> <span class="ribbon top-left ribbon-primary"> </span> <h1>Subscreva a nossa newsletter</h1> <div class="subscribe-widget"> <!-- form --> <form id="subscribe-form"> <input type="email" name="email" placeholder="Coloque aqui o seu email" class="email-form" required> <button type="submit" class="button">Subscrever</button> </form> <!-- end form--> </div> <p><strong>Seja o primeiro a receber as nossas novidades</strong></p> <div id="option"> <a href="#" id="home" class="boxi">Página inicial</a> <em>ou</em> <a href="#" id="close" class="boxi closei">Casas para venda</a> </div> </div> </div> clique em "pagina toda" no canto direito <!-- end snippet --> >Ao clicar em executar clique em "pagina toda" no canto direito [1]: http://api.jquery.com/fadeout/ [2]: http://api.jquery.com/hide/