[分享]css3常用对话框

在前端开发中，常常需要使用对话框来进行交互，CSS3也提供了一些常用的对话框样式，可以方便我们在开发过程中使用。下面是一些常用的CSS3对话框样式。/ alert对话框 / .alert { : fi...

在前端开发中，常常需要使用对话框来进行交互，CSS3也提供了一些常用的对话框样式，可以方便我们在开发过程中使用。

下面是一些常用的CSS3对话框样式。

/* alert对话框 */
.alert {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

/* confirm对话框 */
.confirm {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

/* prompt对话框 */
.prompt {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 10px;
} 

上面的代码中，分别是alert、confirm和prompt对话框的样式，使用时只需要调用对应的类即可。

除了上面的样式之外，还有其他的对话框样式，比如模态框、气泡提示框等，可以根据自己的需求选择使用。