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

Question

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

Asked 7 years ago

Viewed 224 times

0

Code updated and working. Leo Caracciolo’s contribution

$(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 -->
<div class="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>

in your HTML there at the end has 3 < /div>< /div>< /div> has 2 more

– user60252

2017/06/08 at 23:43

2 answers

Browser other questions tagged html css script

You are not signed in. Login or sign up in order to post.

by user60252 · Answer 1 · 2017-06-08T20:50:48+00:00

2

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 that way

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

DOCS

show()

fadeOut()

Hide()

Mine is not working but thanks! I’ll try to see if it improves. Thanks Leo!

– Victor Emanuel

2017/06/08 at 22:17
The close-up works, Leo!

– Victor Emanuel

2017/06/08 at 22:19
@Gcpt I didn’t understand anything about your comments, "on yours is not working" and "close already works".

– user60252

2017/06/08 at 22:25
When I wrote the first comment it was not working because I needed to close the </script>. I had <script>. I saw that mistake right after I wrote the first comment. When I fixed the closing, that is </script> worked and hence the 2nd comment to say that the close-up already works. I hope I was clear. But the delay (20000) still doesn’t work. I’ll see if I find the error. Thank you

– Victor Emanuel

2017/06/08 at 22:36
@Gcpt You tested on running from my answer?

– user60252

2017/06/08 at 22:39
Of course it is... well it’s working now but it’s in the reverse direction, I mean, I wanted it to appear on the page 20 seconds later but what’s happening is it appears right from the beginning when you enter the page and disappears after 20 seconds. What I look for is that the reader does not see the popup when he starts reading and it only appears 20 seconds later when he is finished reading the article. It seemed?

– Victor Emanuel

2017/06/08 at 22:42
@Gcpt hahaha, but the question was not clear. You will have to edit the question. How to open a pop after a few seconds and close after a few seconds after open.

– user60252

2017/06/08 at 22:46
Damn questions I’ve already edited

– Victor Emanuel

2017/06/08 at 22:50
Fantastic that way. What changed?

– Victor Emanuel

2017/06/08 at 23:23
@GCPT has already edited the answer for these effects. Don’t forget to mark the answer as accepted :)

– user60252

2017/06/08 at 23:28
It’s working perfectly. Perfect! I’ve already given a vote but the system says that only with a 15 reputation does the vote appear and I still have 13. I hope you have counted the vote for you. If I can more let me know. Thank you very much Leo. 5****

– Victor Emanuel

2017/06/09 at 10:17

Show 6 more comments

by Ikaro Pinheiro • **306** points · Answer 2 · 2017-06-08T21:06:53+00:00

You can simply use jquery’s click and fadeOut functions as follows:

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

And to close alone after a while:

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