JavaScript自定义提示框样式

自定义的提示框样式，真的比浏览器自带的那个`alert()`好看太多了。不光能改样式，交互也更灵活，用户体验一下子就上去了。你可以自己写个div来当提示框容器，里面加个span做关闭按钮，再用 CSS 稍微一调，视觉效果立马上档次。

浏览器的alert()对话框确实方便，但样式死板得，白底黑字，按钮也改不了。想让提示框跟你的网页风格统一？那就得自己动手，用 HTML+CSS+JavaScript 做一个定制版的。

结构简单，一个div加个p加个span：

  ×
  
这是一个自定义的提示信息

上 CSS，把提示框居中、加点阴影、调调字体什么的：

.custom-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  z-index: 9999;
}
.close {
  cursor: pointer;
  float: right;
  font-size: 24px;
  line-height: 18px;
}
.close:hover {
  color: red;
}

用 JS 控制显示逻辑就行。点按钮就弹框，点叉就关闭：

function showCustomAlert(message) {
  var alertBox = document.querySelector('.custom-alert');
  alertBox.querySelector('p').innerText = message;
  alertBox.style.display = 'block';
}
document.querySelector('.custom-alert .close').addEventListener('click', function() {
  this[removed].style.display = 'none';
});

你可以把这套逻辑封装成组件，用在各种项目里都挺方便的。如果你想做成 QQ 那种风格的提示框，可以参考下这个仿 QQ 消息提示框。

如果你有用jQuery的话，还有现成的提示框插件可以直接套用，这里有例子。想了解更底层的系统提示框实现，也可以看看这个。

，如果你对页面的交互体验有点追求，建议别再用原生alert()了。自己写一个，还能加动画、图标甚至多按钮，想怎么玩都行。