Modal Popup无法在手机上使用

Question

当我们在Facebook上进行实时销售时，我为按钮“实时销售”设置了html，css模式弹出窗口。我们将Iframe代码嵌入到该按钮中。这在PC上运行正常，但此Modal弹出窗口在移动设备上不起作用。任何帮助将不胜感激。

代码

  html {
  font-size: 15px;
}

body {
  font-family: "Robato", sans-serif;
  width: 100%;
  margin: 10 auto;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

.modal-trigger {
  text-decoration: none;
  padding: 1rem;
  background: #FE007A;
  display: inline-block;
  border-radius: 5px;
  margin-top: 3px;
  color: #fff;
}

.modal {
  display: none;
  background: rgba(0, 0, 0, .8);
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  width: auto;
  margin: 0;
}

.modal:target {
  display: table;
}

.modal__dialog {
  display: table-cell;
  vertical-align: middle;
}

.modal__content {
  background: rgb(255, 255, 255);
  width: 25%;
  min-width: 100px;
  margin: auto;
  position: relative;
  @keyframes slideUp {
    from {
      opacity: 0;
      bottom: -200px;
    }
    to {
      opacity: 1;
      bottom: 0;
    }
  }

<div class="modal" id="modal">
  <div class="modal__dialog">
    <section class="modal__content">
      <header class="modal__header">
        <h2 class="modal__title">This Live Sale </h2>
        <a href="#" class="modal__close">×</a>
      </header>
      <div class="modal__body">
        <iframe> Iframe embed code will be replaced</iframe>
      </div>

    </section>
  </div>
</div>