How to open a pop after a few seconds and close after a few seconds after opening

Question

How to open a pop after a few seconds and close after a few seconds after opening

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Code updated and working. Contributed by Leo Caracciolo

$(document).ready( function() {

   $('.popScroll').show(10000);

    $('.popScroll').delay(20000).fadeOut();

   $("#close").click(function(){
        $('.popScroll').hide();
    });
	});

.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;
   }
  .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;
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--popup--><divclass="popScroll" style="display:none">

<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">Fechar</a>
</div>
</div>
</div>

var $box = $('.box');

  $('.closei').each(function(){
    var color = $(this).css('backgroundColor');
    var content = $(this).html();
    $(this).click(function() {
    $box.css('backgroundColor', color);
    $box.addClass('open');
    $box.find('p').html(content);
  });
    
  $('.close').click(function() {
    $box.removeClass('open');
    $box.css('backgroundColor', 'transparent');
    
 });
  
  $('body').toggleClass('overlay');
$("#pop-toggle").click(function(){
  $(".popup").toggle();
  $('body').toggleClass('overlay');
})
$(".close").click(function(){
  $(".popup").toggle();
  $('body').toggleClass('overlay');
});
  
});

/* CSS Code */
.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;
}

<!-- 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">X</a>
</div>
</div>
</div></div>
</div>

html css script

asked by anonymous 08.06.2017 / 22:17

2 answers

Display elements one by one with jquery .each Error using file-type

score 2 · Answer 1

DEMO

In HTML <div class="popScroll" style="display:none">

SCRIPT

$(document).ready( function() {

   $('.popScroll').show(10000);

    $('.popScroll').delay(20000).fadeOut();

   $("#close").click(function(){
        $('.popScroll').hide();
    });
});

The effect on opening $('.popScroll').show(10000); can also be this way

$('.popScroll').delay(10000).fadeIn(500);

DOCS

show ()

fadeOut ()

hide ()

score 0 · Answer 2

0

You can simply use the click and fadeOut functions of jquery as follows:

$('#close').click(function(){
    $box.fadeOut();
})

And to close it up after a while:

 $box.delay(20000).fadeOut();

08.06.2017 / 23:06