jQuery切换类以显示面板。通过单击正文或屏幕上的任何位置关闭

$('html').click(function() {
 $(".number-people-popup").removeClass("active")
 });

$(".number-people .trigger").on('click', function(e){
	e.stopPropagation();
  $(".number-people-popup").toggleClass("active");
});

.trigger{cursor:pointer;}

.number-people-popup{display:none;border:1px solid #000;padding:30px;width:150px;text-align:center;}
.active{display:block;}

<div class="number-people">
    <p class="trigger">
     Click to trigger
    </p>
</div>

<div class="number-people-popup">
Reveal panel here
</div>


<br><br><br><br><br>
Once triggered i want to close by clicking anywhere in the background.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(".number-people .trigger").click(function(e) {
  $(".number-people-popup").toggleClass("active");

  e.stopPropagation();
});

$("body").click(function(e) {
  if (!$(e.target).hasClass("number-people-popup") && $(e.target).parents(".number-people-popup").length === 0) {
    $(".number-people-popup").removeClass("active");
  }
});

.trigger {
  cursor: pointer;
}

.number-people-popup {
  display: none;
  border: 1px solid #000;
  padding: 30px;
  width: 150px;
  text-align: center;
}

.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number-people">
  <p class="trigger">
    Click to trigger
  </p>
</div>

<div class="number-people-popup">
  Reveal panel here
   <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>


<br><br><br><br><br> Once triggered i want to close by clicking anywhere in the background.