Considerations for Styling a Modal

原文地址
modal,dialog,弹出层，会话框，指的都是同一个东西，一个弹出来的小盒子告诉你一些重要的东西，这个东西有多难呢？嗯，我会说，中等难度。关于这个东西确实有一些值得考虑的东西和一些小技巧。

把它放在DOM哪个位置

放在标签之前

这主要是因为样式的原因。当你以body元素为父元素时，这会使你更容易定位这个modal，也能更好的处理自己内部的子元素内容。

居中

我们有一个完全指南关于css居中
这里是一个技巧能让你水平垂直都居中一个元素而无需知道它的宽度和高度

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

固定？

注意到我们使用了 position: fixed;,这是因为如果你使用absolute或其他的话，用户向下滚动屏幕，modal就看不到了

处理宽度

在大屏幕上，一个典型的modal不仅仅要居中还要限制宽度
简单的可适应

.modal {

  /* 省略的代码 */

  width: 600px;
  max-width: 100%;
}

处理高度

.modal {

  /* 省略的代码 */

  height: 400px;
  max-height: 100%;

}

处理蒙板

一个modal经常有一个全屏覆盖的蒙板，它能够

它减暗了modal之外的亮度，强制让用户处理弹出的会话框
它能够用来防止点击/交互modal之外的的内容
它能够被做成一个巨大的关闭按钮
典型的处理：

.modal {

  /* 已经讨论过的代码 */

  z-index: 1010;

}
.modal-overlay {

  /* 建议:
     不需要太过关注1000数字，只要它在你的z-index系统中足够高就可以，
     要比上面的modal部分低，因为modal是在蒙版之上的
  */
  z-index: 1000;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

用一个class来关闭(而不是用一个class来打开)

如果是先给modal使用display:none来隐藏它，需要打开时再改变它的display让它可见。但这是有问题的，因为你想要让modal可见的dispaly可能是flex，blcok，grid等等，这样是这个closed类不够通用。但如果先写出正常的modal的display，然后再用一个display: none;去覆盖之前的display，打开modal的时候移去这个closed类就可以了，而不需要考虑它打开时是什么display

.modal {

  /* for example... */
  display: flex;  

}
.modal.closed {

  display: none;

}

style一个modal时的思考