如何使用 Bootstrap 美化 JavaScript 中的 alert 弹窗

可以使用 Bootstrap 的模态框（Modal）来替换原生的 alert 弹窗。具体实现步骤如下：

在页面中引入 Bootstrap 的 CSS 和 JS 文件，可以通过 CDN 来引入：

<link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>

在页面中添加一个模态框，用于显示提示信息：

<div class='modal fade' id='alertModal' tabindex='-1' role='dialog' aria-labelledby='alertModalLabel' aria-hidden='true'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='alertModalLabel'>提示信息</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        <p id='alertMessage'>这里是提示信息</p>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-primary' data-dismiss='modal'>确定</button>
      </div>
    </div>
  </div>
</div>

修改原来的 alert 弹窗部分代码，使用新的模态框来显示提示信息：

if (data == '没有战绩') {
  $('#alertMessage').text('没有找到该用户的战绩哦');
  $('#alertModal').modal('show');
  $('#loading').hide();
  return;
} else if (data == '未找到此召唤师') {
  $('#alertMessage').text('未找到此召唤师！');
  $('#alertModal').modal('show');
  $('#loading').hide();
  return;
}

注意，这里需要将提示信息动态地插入到模态框中，使用 jQuery 的 text() 方法可以实现。

最后，将原来的 alert 弹窗部分代码删除即可。

使用 Bootstrap 的模态框后，弹窗的样式和交互效果都会有所改善，更加美观和友好。同时，模态框还可以自定义更多的内容和功能，比如添加按钮、表单等。