I am trying to put the .pop-overlay div to body.

It looks like .appendTo(document.body) works with jQuery 2.X.X but does not work with 3.X.X... I did some research but I am still not sure how to do it in another way.

Any idea how to be compatible with jQuery 3.5.X?

.pop-overlay {
  position: fixed;
  display: none;
}

$(function () {
  var overlay = $('<div ></div>');
  overlay.show();
  overlay.appendTo(document.body);
});

Here is the whole thing I am trying on CodePen: https://codepen.io/pen/rNdgZyq

CodePudding user response：

The append works just fine.

The only thing is that pop-overlay is not visible at default. So change this $(".pop-onload").show(); to $(".pop-onload,.pop-overlay").show();

Demo

$(function () {
  var overlay = $('<div ></div>');
  overlay.show();
  overlay.appendTo(document.body);
  $(".pop-onload,.pop-overlay").show();
  $(".xclose").click(function () {
    $(".pop-onload").hide();
    overlay.appendTo(document.body).remove();
    return false;
  });
});

.pop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  z-index: 9999;
  display: none;
}
.pop-onload {
  width: 100%;
  margin: 0 auto;
  top: 4%;
  border-radius: 20px;
  display: none;
  position: fixed;
  z-index: 99999;
}
.pop-content {
  min-width: 250px;
  width: 400px;
  min-height: 150px;
  margin: 1% auto;
  background: #f3f3f3;
  position: relative;
  z-index: 103;
  padding: 20px 35px;
  box-shadow: 0 2px 20px #000;
  border-radius: 20px;
}
.pop-content a {
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background-color: #eb883a;
  border-radius: 0px 0px 0px 0px;
  padding: 10px 30px 10px 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class='pop-onload'>      
  <div class='pop-content'>  
    <h2>Good stuff here!</h2>
    <p>Let's close this pop-up.</p>
    <a href=""  role="button">Close Me</a>                                               
  </div>
</div>