自定义JS提示框：替代系统alert并自动关闭

"这篇文章主要介绍了如何使用JavaScript创建一个自定义的提示框来替代系统的alert对话框，并实现自动关闭功能，特别是在苹果手机微信环境中解决alert对话框显示网站地址的问题。" 在网页开发中，系统的alert对话框经常被用来向用户显示信息或者确认操作，但是它存在一些限制，例如在苹果手机的微信环境下，会显示网站地址，这可能影响用户体验。为了解决这个问题，开发者可以创建自定义的提示框来替代系统默认的alert。 首先，我们需要编写CSS样式来定义这个自定义提示框的外观。代码中创建了一个类名为.show_alert_box的样式，用于覆盖整个屏幕并设置半透明背景，确保提示框处于最上层。另外，还有一个.show_alert_div的样式，用于定义提示框的具体内容区域，包括圆角、边框以及内部元素的布局。 接着，HTML部分，我们可以创建一个div元素，应用上面定义的CSS类，然后在其中添加需要显示的内容，如标题（h1）、正文（h2）和按钮（如果需要的话，比如确认或取消按钮）。这里没有给出具体的HTML结构，但通常会包含一个可点击的元素来触发关闭提示框的事件。 JavaScript部分是实现自动关闭的关键。可以为这个自定义提示框添加一个计时器，设定一段时间后自动关闭。例如，可以使用`setTimeout`函数，在指定毫秒数后执行一个匿名函数，该函数负责将提示框的显示状态设置为none，从而达到关闭的效果。同时，为了实现与系统alert相似的阻塞效果，需要在调用自定义提示框后暂停执行后续的JavaScript代码，直到用户关闭提示框。这可以通过异步处理或者使用Promise来实现。 替换系统alert对话框不仅可以提高用户体验，还能更好地控制提示框的样式和行为。通过自定义CSS和JavaScript，我们可以创建一个适应各种场景的提示框，比如在苹果手机微信中避免不必要的信息显示，同时提供自动关闭功能，使交互更加流畅。