how to remove login from page flow & use jquery fade in and fade out login

var modal = document.querySelector('.modal');
var closeButtons = document.querySelectorAll('.close-modal');
// set open modal behaviour
document.querySelector('.open-modal').addEventListener('click', function() {
  modal.classList.toggle('modal-open');
});
// set close modal behaviour
for (i = 0; i < closeButtons.length; ++i) {
  closeButtons[i].addEventListener('click', function() {
    modal.classList.toggle('modal-open');
  });
}
// close modal if clicked outside content area
document.querySelector('.modal-inner').addEventListener('click', function() {
  modal.classList.toggle('modal-open');
});
// prevent modal inner from closing parent when clicked
document.querySelector('.modal-content').addEventListener('click', function(e) {
  e.stopPropagation();
});

*{
  box-sizing: border-box;
}

.modal {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease-in-out;
}
.modal.modal-open {
  visibility: visible;
  backface-visibility: visible;
  opacity: 1;
  z-index: 1;
}
.modal .modal-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  width: 423px;
  height: auto;
  padding: 10px;
  position: relative;
  margin: 2rem;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}

.modal-close-icon {
  position: absolute;
  top: 5px;
  right: 10px;
}

.modal-content-inner {
  padding: 10px;
}

.modal-content-inner h1, .modal-content-inner h2, .modal-content-inner h3, .modal-content-inner h4, .modal-content-inner h5, .modal-content-inner h6 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 24px;
}

.login-body {
  width: 100%;
  height: auto;
}

.credentials-info{
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

.credentials-info label input{
  display: block;
  width: 70%;
  font-size: 16px;
  padding: 10px 5px 5px 30px;
  border: none;
}

.credentials-info a{
  width: 70%;
  font-size: 16px;
  padding: 10px 5px 5px 30px;
  border: none;
}

form button{
  display: block;
  width: 100%;
  background-color: #f7931e!important;
  color: #fff!important;
  outline: 0;
  font-size: 16px;
  margin: 10px auto;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.login-bottom span{
  width: 100%;
}

#forgetPass{
  display: block;
  width: 100%;
  background-color: #b9b9b9!important;
  color: #fff!important;
  outline: 0;
  font-size: 16px;
  margin: 10px auto;
  padding: 10px;
  border: none;
  cursor: pointer;
  text-align: center;
}

form p{
  text-align: center;
  font-size: 14px
}

.demo-container {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>my login</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
</head>

<body>
  <div class="modal modal-open">
    <div class="modal-inner">
      <div class="modal-content">
        <div class="modal-close-icon">
          <a href="javascript:void(0)" class="close-modal"><i class="fa fa-times" aria-hidden="true"></i></a>
        </div>
        <div class="modal-content-inner">
          <div class="login-header">
            <div class="login-IbUy">
              <img src="" alt="" />
              <h4>Connectez-vous à votre compte</h4>
            </div>
          </div>
          <form>
            <div class="login-body">
              <div class="credentials-info">
                <label>
                  Email*
                  <i class="fa fa-envelop"></i>
                  <input placeholder="Entrez votre Email" required>
                </label>
              </div>
              <div class="credentials-info">
                <label>
                  Mot de passe*
                  <i class="fa fa-envelop"></i>
                  <input placeholder="Entrez votre Mot de passe" required>
                </label>
              </div>
              <div class="credentials-info">
                <i class="fa fa-envelop"></i>
                <a href="#">Connectez-vous avec Facebook</a>
              </div>
            </div>
            <div class="login-bottom">
              <button type="submit" onclick="">Me connecter</button>
              <span class="lostPass">
                <a href="#" id="forgetPass" onclick="">Mot de passe oublié</a>
              </span>
              <p>
                Vous n'avez pas encore de compte?
                <a href="#register">Inscrivez-vous ici</a>
              </p>

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

    </div>
  </div>

  <main class="container demo-container">
    <br>
    <button class="button open-modal">Launch modal window</button>
  </main>
</body>
</html>