css屏幕中间出现对话框

CSS屏幕中间出现对话框，通常是我们需要在网页上显示一些内容，但是希望不影响用户的操作，因此我们想到了使用对话框的方式。

/* HTML代码 */div class="dialog">
      h1>
    标题/h1>
      p>
    内容/p>
      button>
    确认/button>
    /div>
/* CSS代码 */.dialog {
      display: none;
     /* 隐藏对话框 */  position: fixed;
     /* 固定定位，不受滚动影响 */  top: 50%;
     /* 距离顶部50% */  left: 50%;
     /* 距离左侧50% */  transform: translate(-50%, -50%);
     /* 调整居中位置 */  width: 300px;
     /* 宽度 */  height: 200px;
     /* 高度 */  background-color: #fff;
     /* 背景色 */  z-index: 999;
 /* 层级 */}
.dialog h1 {
      font-size: 16px;
     /* 标题字号 */  margin: 0 0 20px;
 /* 标题下方的间距 */}
.dialog p {
      font-size: 14px;
     /* 内容字号 */  margin: 0 0 20px;
 /* 内容下方的间距 */}
.dialog button {
      display: block;
     /* 将按钮变成块级元素 */  margin: 0 auto;
     /* 居中 */  padding: 8px 16px;
     /* 按钮内边距 */  font-size: 14px;
     /* 按钮字号 */  background-color: #0066cc;
     /* 按钮背景色 */  color: #fff;
     /* 按钮字体颜色 */  border: none;
     /* 去除边框 */  cursor: pointer;
 /* 鼠标指针变成手型 */}
    

以上是实现屏幕中间出现对话框的CSS代码，通过将对话框相对窗口居中，并设置固定定位，可以实现不影响用户操作的效果。同时，我们可以根据实际需要调整对话框的宽高，以及标题、内容和按钮的样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！