前端页面弹出窗口居中显示详情-前端教程-前军教程网

后台Controller，获取数据后跳转到editor_view页面：

// 查询一条记录
@GetMapping("/view/{id}")
   public String selectById(@PathVariable("id") int id, Model model) {
   Editor editor=editorService.selectById(id);
   model.addAttribute("editor",editor);
   return "editor_view";
}

弹出页面editor_view代码：

<body>
<h1>Information</h1>
<p>ID: <span th:text="${editor.id}"></span></p> <!-- 显示id -->
<p>TITLE: <span th:text="${editor.title}"></span></p>
<p>CONTENT: <span th:utext="${editor.content}"></span></p>
</body>

前端代码：

<tbody>
<tr th:each="editor : ${editors}">
   <td th:text="${editor.id}"></td>
   <td>
       <a href="#" class="view-editor-link" th:attr="data-id=${editor.id}" th:text="${editor.title}">查看内容</a>
   </td>
   <td th:utext="${editor.content}"></td>
</tr>
</tbody>

<script>
   function openCenteredWindow(url, width, height) {
       // 获取屏幕宽度和高度
       var screenWidth = window.screen.width;
       var screenHeight = window.screen.height;
       // 计算新窗口的左上角位置，使其居中
       var left = Math.round((screenWidth - width) / 2);
       var top = Math.round((screenHeight - height) / 2);
       // 打开新窗口并设置位置和大小
       var newWindow = window.open(url, '_blank', 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top);
       // 如果需要，为新窗口添加一些额外的功能，例如关闭或调整大小
       return newWindow;
  }

   // 选择所有带有 .view-editor-link 类的链接
   var links = document.querySelectorAll('.view-editor-link');
   // 遍历所有链接，并为每个链接添加事件监听器
   links.forEach(function(link) {
       link.addEventListener('click', function(event) {
           // 阻止链接的默认行为（即跳转至 href 属性指定的 URL）
           event.preventDefault();
           var editorId = this.getAttribute('data-id'); // 获取编辑器的 ID
           fetch('/editor/view/' + editorId) // 发起 GET 请求
              .then(response => response.text()) // 解析响应为文本
      .then(html => {
               // 在弹出窗口中显示返回的内容
           var popupWindow= openCenteredWindow('',  800, 600);
           popupWindow.document.write(html); // 写入 HTML 内容
           popupWindow.document.close(); // 关闭文档流
      })
      .catch(error => {
               console.error('Error fetching content:', error);
      });
      });
  });
</script>

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

前端页面弹出窗口居中显示详情