CSS 및 JavaScript를 사용한 팝업 구독 양식

팝업 구독 양식 만들기, 구독한 사용자의 메일링 목록을 갖는 것은 사용자를 웹사이트로 다시 보내는 데 매우 중요합니다. 일반적으로 사람들은 귀하의 웹사이트에 와서 게시물을 읽고 이동합니다. 웹 사이트에 새 콘텐츠를 게시하면 반환되지 않을 수 있습니다. 따라서 구독 사용자 목록이 있으면 실제로 도움이 됩니다. 사용자가 귀하의 웹 사이트에서 귀하의 블로그를 방문하는 것을 선호할 때 구독 버튼을 클릭하면 창 화면에 모델 구독 양식이 팝업됩니다.

팝업 구독 양식 만들기

이 방법에서 한 가지 유의할 점은 팝업을 여러 개 만들지 않는 것입니다. 이 경우 사용자가 화를 내고 블로그를 완전히 읽지 않고 떠날 수 있습니다. 시작하자.

먼저 index.html , style.css 및 Javascript 파일을 생성하거나 HTML 파일에도 CSS 및 js 코드를 추가할 수 있습니다.

HTML 코드:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <a class="button popup-button" href="#">Open Model!</a>
</div>
<div class="wrapper">
    <div class="popup-box">
      <h2>SIGN UP & GET 10% OFF</h2>
      <p>Subscribe to our newsletters now and stay up-to-date with new collections.</p>
      <a class="close-button popup-close" href="#">x</a><div class="form-group">
      <form method="post">
        <input type="email" name="useremail-id" required placeholder="Please Enter your email">
        <button type="submit" id="subscribe">SUBSCRIBE</button>
      </form>
    </div>
    </div>
  </div>

CSS 스타일:

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);
body {
  font-family: "Open Sans";
  line-height: 200%;
  background: #7b78ff;
}
#subscribe{background:#ddd;padding:15px 30px 15px 30px;margin:10px;border:none;cursor:pointer;border-radius:10px;}
input {
  width: 100%;
  height: 55px;
  background-color: #eee;
  border: none;
  padding-left: 15px;
  outline: none;
  font-weight: 600;
  position: relative;
  border-radius:10px;
}
.container {
  width: 800px;
  margin: 10px auto;
  text-align: center;
}

h2 {
  margin-bottom: 20px;
  font-size: 32px;  color:#fff !important;
}

h3 {
  font-size: 16px;  color:#fff;
}

p {
  font-size: 16px;
  color: #fff;
}

.button {
  margin-top: 30px;
  padding: 2.2% 5.5%;
  display: inline-block;
  -webkit-transition: all linear 0.15s;
  transition: all linear 0.15s;
  border-radius: 3px;
  background: #fff;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: #333;
}
.button:hover {
  opacity:1.75;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  content: "";
  background: rgba(0, 0, 0, 1);
}

.popup-box {
  width: 400px;
  padding: 70px;
  transform: translate(-50%, -50%) scale(.5);
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0px 2px 16px rgba(255,255, 255, .9);
  border-radius: 20px;
  text-align: center;

}
.popup-box h2 {
  color: #1a1a1a;
}
.popup-box h3 {
  color: #888;
}
.popup-box .close-button {
  width: 35px;
  height: 35px;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  border-radius: 1000px;
  background: #7b78ff;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  line-height: 190%;
}
.popup-box .close-button:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.transform-in, .transform-out {
  display: block;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.transform-in {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
.transform-out {
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
}

자바스크립트:

$(document).ready(function() {
  $('.popup-button').click(function(e) {
    $('.wrapper').fadeIn(500);
    $('.popup-box').removeClass('transform-out').addClass('transform-in');

    e.preventDefault();
  });

  $('.popup-close').click(function(e) {
    $('.wrapper').fadeOut(500);
    $('.popup-box').removeClass('transform-in').addClass('transform-out');

    e.preventDefault();
  });
});

Popup Subscription Form using CSS & Javascript에서 이 게시물을 공유했습니다. 거기에서 자세히 읽을 수 있습니다.

라이브 데모 보기Codepen

이 게시물이 귀하의 웹 사이트에 구독 팝업 모델을 만드는 방법을 배우는 데 도움이 되었기를 바랍니다. 질문이나 제안 사항이 있으면 아래에서 논의하십시오.