JSP页面点击按钮无法弹出对话框，求技术解决方案

我看了你的代码，问题主要出在两个核心点：缺少必要的依赖库，以及按钮的默认表单提交行为打断了对话框的显示，下面一步步帮你修复：

1. 必须引入jQuery和jQuery UI库 #

你代码里用到的$()（jQuery选择器）和.dialog()（jQuery UI对话框组件）都是第三方库提供的功能，浏览器本身不支持，所以得先在页面里引入它们。建议在<head>标签里添加这些资源（顺序很重要，先jQuery再jQuery UI），还要引入jQuery UI的样式文件来保证对话框正常显示：

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=10">
  <meta charset="utf-8">
  <!-- 引入jQuery核心库 -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <!-- 引入jQuery UI组件库 -->
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <!-- 引入jQuery UI基础样式，保证对话框正常渲染 -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>

2. 阻止按钮的默认表单提交行为 #

你的按钮是type="submit"，点击后会立即触发表单提交，页面会刷新，导致对话框刚要显示就被刷新冲掉了。所以需要在事件里阻止这个默认行为：

修改按钮的onclick属性： #

<button type="submit" class="btn btn-default btn-lg" onclick="return alerte_habilitation('Test!')">Envoyer</button>

同步修改JavaScript函数，添加阻止默认行为的逻辑： #

function alerte_habilitation( msg ){
  // 阻止表单默认提交动作
  event.preventDefault();
  
  var popup = $("<div></div>");
  $(popup).append('<img src="img/bigWarning.png" class="dialog-image">');
  $(popup).append('<span class="dialog-msg">'+msg+'</span>');
  
  var popupConf = {
    autoOpen : true,
    resizable : false,
    draggable : false,
    width : 500,
    title : "Attention",
    modal : true,
    buttons : {
      "OK": function () {
        $(this).dialog("close");
        // 可选：如果需要用户点击OK后再提交表单，取消下面的注释
        // document.querySelector('form').submit();
      }
    }
  };
  
  $(popup).dialog( popupConf );
  
  // 返回false也能进一步阻止默认提交
  return false;
}

修复后的完整代码 #

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=10">
  <meta charset="utf-8">
  <!-- 引入依赖库 -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
  <form action="/HabilitationFaite" method="POST">
    <!-- 你的表单内容 -->
    <div class="text-center">
      <button type="submit" class="btn btn-default btn-lg" onclick="return alerte_habilitation('Test!')">Envoyer</button>
    </div>
  </form>

  <script type="text/javascript">
    function alerte_habilitation( msg ){
      event.preventDefault();
      
      var popup = $("<div></div>");
      $(popup).append('<img src="img/bigWarning.png" class="dialog-image">');
      $(popup).append('<span class="dialog-msg">'+msg+'</span>');
      
      var popupConf = {
        autoOpen : true,
        resizable : false,
        draggable : false,
        width : 500,
        title : "Attention",
        modal : true,
        buttons : {
          "OK": function () {
            $(this).dialog("close");
            // 可选：点击OK后提交表单
            // document.querySelector('form').submit();
          }
        }
      };
      
      $(popup).dialog( popupConf );
      
      return false;
    }
  </script>
</body>
</html>

额外说明 #

• 如果你不想用CDN资源，可以下载jQuery和jQuery UI的文件到本地项目，替换对应的src路径即可。
• 若需要用户确认后再提交表单，只需取消代码中document.querySelector('form').submit();的注释。

内容的提问来源于stack exchange，提问作者youssef