The answers above are not 100% clear, so this is what helped me. I had a static 401.html page and experienced the same problem as the original poster. All I did was to change the page to a 401.jsp page and dump this right at the top:
<%
String realmName = "A nice name to show as the title of on the pop-up";
response.setHeader("WWW-Authenticate","Basic realm=\"" + realmName + "\"");
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
%>
The following post on coderanch.com served as guidance.
So in a nutshell, the pertinent section of web.xml looks like this:
<!-- Internal server error. -->
<error-page>
<error-code>500</error-code>
<location>/errors/500.html</location>
</error-page>
<!-- Not found. -->
<error-page>
<error-code>404</error-code>
<location>/errors/404.html</location>
</error-page>
<!-- Unauthorized. -->
<error-page>
<error-code>401</error-code>
<location>/errors/401.jsp</location>
</error-page>
And 401.jsp looks like this:
<%
String realmName = "A nice name to show as the title of on the pop-up";
response.setHeader("WWW-Authenticate","Basic realm=\"" + realmName + "\"");
response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>401 Unauthorized</title>
<meta name="description" content="The server has not found anything matching the Request-URI.">
<style type="text/css">
body {background-color:ffffff;background-image:url(http://);background-repeat:no-repeat;background-position:top left;background-attachment:fixed;}
h3{font-family:Arial;color:000000;}
p {font-family:Arial;font-size:14px;font-style:normal;font-weight:normal;color:000000;}
</style>
</head>
<body>
<h3>401 Unauthorized</h3>
<p>The request requires authentication.</p>
</body>
</html>