Use 
[show()][1]

[fadeOut()][2]   

[hide()][3]

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

	$(document).ready( function() {
	    
	   $('.popScroll').show(10000);
	        
	    $('.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" 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">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

O efeito na abertura <sub>$('.popScroll').show(10000);</sub> também pode ser dessa forma 

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

  [1]: http://api.jquery.com/show/
  [2]: http://api.jquery.com/fadeout/
  [3]: http://api.jquery.com/hide/