简洁的响应式模态窗兼容移动端【原创】

页面的head部分，需引入两个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/normalize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，三种效果放置在不同的div容器里，代码如下：

<div class="demo-btns">
  <header>
    <h1>简洁的响应式模态窗兼容移动端</h1>
  </header>
  <div class="info">
    <div class="buttons">
      <p> <a href="" data-modal="#modal" class="modal__trigger">左侧弹窗</a> <a href="" data-modal="#modal2" class="modal__trigger">中间弹窗</a> <a href="" data-modal="#modal3" class="modal__trigger">右侧弹窗</a> </p>
    </div>
  </div>
</div>

<!--模态窗-->
<div id="modal" class="modal modal__bg" role="dialog" aria-hidden="true">
  <div class="modal__dialog">
    <div class="modal__content">
      <h1>左侧弹窗</h1>
      <p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
      <p>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
      <!--关闭按钮--> 
      <a href="" class="modal__close demo-close">
      <svg class="" viewBox="0 0 24 24">
        <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
        <path d="M0 0h24v24h-24z" fill="none"/>
      </svg>
      </a> </div>
  </div>
</div>
<div id="modal2" class="modal modal--align-top modal__bg" role="dialog" aria-hidden="true">
  <div class="modal__dialog">
    <div class="modal__content">
      <h1>中间弹窗</h1>
      <h3>秘密——吸引力法则</h3>
      <p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
      <p><img src="images/63c80caba87d44cd964bf0929413219d.gif" alt="" /></p>
      <p>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
      <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p>
      <p>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”</p>
      <p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
      <p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
      <!--关闭按钮--> 
      <a href="" class="modal__close demo-close">
      <svg class="" viewBox="0 0 24 24">
        <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
        <path d="M0 0h24v24h-24z" fill="none"/>
      </svg>
      </a> </div>
  </div>
</div>
<div id="modal3" class="modal modal__bg" role="dialog" aria-hidden="true">
  <div class="modal__dialog">
    <div class="modal__content">
      <h1>右侧弹窗</h1>
      <p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
      <p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
      <!--关闭按钮-->
      <a href="" class="modal__close demo-close">
      <svg class="" viewBox="0 0 24 24">
        <path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"/>
        <path d="M0 0h24v24h-24z" fill="none"/>
      </svg>
      </a> </div>
  </div>
</div>

页面的底部，引入一个JS文件，用于弹窗的事件响应和显示效果控制，代码如下：

<script type="text/javascript" src="js/index.js"></script>