jQuery和CSS3的点击弹出订阅窗口代码

一款jQuery和CSS3的点击弹出订阅窗口代码，页面初始化后点击页面的按钮，会弹出一个订阅的对话框，弹窗对话框是自适应的，整体样式还是很不错的，喜欢的童鞋请收下吧。

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入必要的CSS样式文件和jQuery库，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

页面的body部分，结构不算复杂，用了多个div容器的嵌套，注意一下里面的form表单就好，代码如下：

<div class="button">
  <button><span>点击</span></button>
</div>
<div class="pop-up">
  <div class="content">
    <div class="container">
      <div class="dots">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <span class="close">狠心离开</span>
      <div class="title">
        <h1>订阅有礼</h1>
      </div>
      <img src="images/car.png" alt="Car">
      <div class="subscribe">
        <h1>订阅后可获取最新消息和更新内容。</h1>
        <form>
          <input type="email" placeholder="请输入您的邮箱">
          <input type="button" value="立即订阅">
        </form>
      </div>
    </div>
  </div>
</div>

页面的底部，设置好按钮点击事件的响应即可，代码如下：

<script type="text/javascript">
$('button').click(function(){
  $('.pop-up').addClass('open');
});
$('.pop-up .close').click(function(){
  $('.pop-up').removeClass('open');
});
</script>