I'm making a website which you can view here: carlraymondhansen.com

I'm not very good at coding so I don't really know what I'm doing here. But I got the website to work how I want on the desktop. Mobile works just as well except that when you open a popup, you can't close it like you can on desktop. I wanted to make it so you can tap anywhere outside the window and it'll close. You can click anywhere on desktop, not on mobile. How do I fix this?

Here's all the code for the site:

```js
$(document).ready(function() {
  $('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel');
    var popURL = $(this).attr('href');
    var query = popURL.split('?');
    var dim = query[1].split('&');
    var popWidth = dim[0].split('=')[1];
    $('#' + popID).fadeIn().css({
      'width': Number(460)
    }).prepend('<a href="#"             class = "close" > < /a>');
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    $('#' + popID).css({
      'margin-top': -popMargTop,
      'margin-left': -popMargLeft
    });

    $('body').append('<div id="fade"></div>');
    $('#fade').css({
      'filter': 'alpha(opacity=80)'
    }).fadeIn();
    return false;
  });

  $('a.close, #fade').live('click', function() {
    $('#fade , .popup_block').fadeOut(function() {
      $('#fade, a.close').remove();
    });
    return false;
  });
});
```

```css
body {
  background-image: url(https://i.imgur.com/Y4eYm05.jpg);
  background-attachment: relative;
  background-repeat: no-repeat;
}

.container {
  width: 100%;
  font-family: Cormorant Garamond;
  font-size: 20px;
  font-weight: 500;
  color: black;
  text-align: center;
  line-height: 1.5;
}

.container #card1 {
  width: 400px;
  height: 200px;
  background-color: white;
  margin: auto;
  top: 300px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}

.container #card1 #name {
  width: 400px;
  height: 200px;
  padding-top: 70px;
}

.container a {
  color: black;
  text-decoration: none;
}

.container #card2 {
  width: 400px;
  height: 200px;
  background-image: url(https://i.imgur.com/PkOy68G.gif);
  background-size: 400px 200px;
  margin: auto;
  top: 508px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}

.container #card3 {
  width: 400px;
  height: 200px;
  background-image: url(https://i.imgur.com/XRjMag8.gif);
  background-size: 400px 200px;
  margin: auto;
  top: 720px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}

.container #card4 {
  width: 400px;
  height: 200px;
  background-image: url(https://i.imgur.com/r9wm3Zv.gif);
  background-size: 400px 200px;
  margin: auto;
  top: 930px;
  position: relative;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}

.container #card5 {
  width: 400px;
  height: 200px;
  background-color: white;
  margin: auto;
  top: 1138px;
  position: relative;
  margin-bottom: 250px;
  box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}

.container #card5 #contact {
  width: 400px;
  height: 200px;
  padding-top: 70px;
}

.popup_block {
  text-align: center;
  font-family: Cormorant Garamond;
  font-size: 18px;
  font-weight: 500;
  padding: 30px;
  width: 500px;
  display: none;
  background: #fff;
  float: left;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000;
}

*html #fade {
  position: absolute;
}

*html .popup_block {
  position: absolute;
}

#fade {
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #000;
  opacity: 0.8;
}

.popup_block a {
  color: blue;
  text-decoration: none;
}

.popup_block a:hover {
  color: red;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:500,700" rel="stylesheet">

  <!----------------------------------------->

  <!----------------------------------------->

  <div class="container">
    <div id="card1">
      <a href="#?w=500" rel="box4" class="poplight">
        <div id="name">Carl Raymond Hansen</br>Writer & Director</div </a>
    </div>
    <div id="card2">
      <a href="#?w=500" rel="box1" class="poplight"></a>
    </div>
    <div id="card3">
      <a href="#?w=500" rel="box3" class="poplight"></a>
    </div>
    <div id="card4">
      <a href="#?w=500" rel="box2" class="poplight"></a>
    </div>
    <div id="card5">
      <a href="#?w=500" rel="box5" class="poplight">
        <div id="contact">408 — 887 — 0157</br>carlraymondhansen@gmail.com</div>
      </a>
    </div>
  </div>

  <div class="content">
    <div id="blur"></div>
  </div>

  <!---------------------------------------->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

  <!---------------------------------------->

  <link rel="stylesheet" href="styles.css">

</head>

<!----------------------------------------->

<body>

  <div id="box1" class="popup_block">
    </br>
    Reel
    </br>
    Cinematography
    </br>
    </br>
    </br>
    <iframe width="400" height="224" src="https://www.youtube.com/embed/csUuikE2ZIg?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </br>
    </br>
  </div>

  <div id="box3" class="popup_block">
    </br>
    — then Stupor —
    </br>
    Writer & Director
    </br>
    </br>
    <iframe width="400" height="224" src="https://www.youtube.com/embed/hmDk0CIPV7U?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </br>
    </br>
  </div>

  <div id="box2" class="popup_block">
    </br>
    Calling Lisa
    </br>
    Writer & Director
    </br>
    </br>
    </br>
    <iframe width="400" height="224" src="https://www.youtube.com/embed/EkYuXxTvdFw?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </br>
    </br>
  </div>

  <div id="box4" class="popup_block">
    </br>
    Currently Attending
    </br>
    Art Center College of Design
    </br>
    For Directing
    </br>
    </br>
    <a href="https://drive.google.com/file/d/1raabMEdIHw3PE1GgAFkAAYmfyahVAvfy/view?usp=sharing" target="_blank">Resume</a>
    </br>
    </br>
  </div>

  <div id="box5" class="popup_block">
    </br>
    Follow my Social Media
    </br>
    </br>
    <a href="https://twitter.com/absurdistbear" target="_blank">Twitter</a>
    </br>
    <a href="https://www.instagram.com/absurdistbear/" target="_blank">Instagram</a>
    </br>
    </br>
  </div>

  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

  <!----------------------------------------->

</body>

</html>
```