如何在Spring MVC项目中用Javascript、Ajax、Java及JSP打开自定义尺寸弹窗

1. 浏览器原生独立弹窗（window.open）实现 #

适合需要独立窗口的场景，调用浏览器原生API快速实现。

通用JS弹窗函数 #

在JSP页面的<script>标签中添加：

function openCustomWindow(url, width, height, title) {
    // 计算弹窗居中位置
    const left = (window.screen.width - width) / 2;
    const top = (window.screen.height - height) / 2;
    // 配置弹窗参数：禁用工具栏、菜单栏，允许滚动和缩放
    const config = `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`;
    // 打开弹窗
    window.open(url, title, config);
}

JSP页面调用 #

添加触发按钮直接调用函数：

<button onclick="openCustomWindow('${pageContext.request.contextPath}/demo/popup-page', 600, 400, '用户详情')">打开自定义弹窗</button>

Spring MVC后端配置 #

编写Controller返回弹窗页面：

@Controller
@RequestMapping("/demo")
public class PopupController {

    @GetMapping("/popup-page")
    public String popupPage(Model model) {
        // 向弹窗页面传递数据
        model.addAttribute("userName", "张三");
        return "popup/user-detail"; // 对应WEB-INF/views/popup/user-detail.jsp
    }
}

2. 页面内自定义模态框（结合Ajax动态加载） #

在当前页面内展示弹窗，通过Ajax从后端拉取内容，配合自定义样式实现更灵活的交互。

模态框基础样式 #

在JSP的<style>标签中添加：

/* 遮罩层 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 999;
}

/* 弹窗容器 */
.modal-container {
    position: fixed;
    background: #fff;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 1000;
    overflow: auto;
}

.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    cursor: pointer;
    font-size: 20px;
    color: #666;
}

.modal-body {
    padding: 16px;
}

Ajax加载弹窗的JS函数 #

function openAjaxModal(url, width, height, title) {
    // 获取DOM元素
    const overlay = document.getElementById('modal-overlay');
    const container = document.getElementById('modal-container');
    const modalTitle = document.getElementById('modal-title');
    const modalBody = document.getElementById('modal-body');

    // 设置弹窗宽高与标题
    container.style.width = `${width}px`;
    container.style.height = `${height}px`;
    modalTitle.textContent = title;

    // 发起Ajax请求加载内容
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            modalBody.innerHTML = xhr.responseText;
            // 显示弹窗与遮罩
            overlay.style.display = 'block';
            container.style.display = 'block';
        }
    };
    xhr.send();

    // 关闭弹窗逻辑
    const closeBtn = document.getElementById('modal-close');
    closeBtn.onclick = function() {
        overlay.style.display = 'none';
        container.style.display = 'none';
        modalBody.innerHTML = ''; // 清空内容
    };
    overlay.onclick = () => closeBtn.click();
}

JSP页面结构与调用 #

添加模态框DOM和触发按钮：

<!-- 模态框遮罩层 -->
<div id="modal-overlay" class="modal-overlay"></div>
<!-- 模态框容器 -->
<div id="modal-container" class="modal-container">
    <div class="modal-header">
        <h3 id="modal-title"></h3>
        <span id="modal-close" class="modal-close">&times;</span>
    </div>
    <div id="modal-body" class="modal-body"></div>
</div>

<!-- 触发按钮 -->
<button onclick="openAjaxModal('${pageContext.request.contextPath}/demo/ajax-popup-content', 500, 350, '动态加载内容')">打开Ajax弹窗</button>

Spring MVC后端处理 #

编写返回弹窗内容的接口：

@Controller
@RequestMapping("/demo")
public class PopupController {

    @GetMapping("/ajax-popup-content")
    public String ajaxPopupContent(Model model) {
        // 模拟数据
        model.addAttribute("dataList", Arrays.asList("数据1", "数据2", "数据3"));
        return "popup/ajax-content"; // 返回JSP片段，对应WEB-INF/views/popup/ajax-content.jsp
    }
}

ajax-content.jsp示例：

<ul>
    <c:forEach items="${dataList}" var="item">
        <li>${item}</li>
    </c:forEach>
</ul>
<p>这是通过Ajax动态加载的弹窗内容</p>

注意事项 #

• 路径处理：始终用${pageContext.request.contextPath}拼接请求路径，避免部署路径变化导致的404问题。
• 弹窗拦截：浏览器会拦截非用户主动触发的window.open，确保触发逻辑绑定在点击等交互行为上。
• 响应式适配：可在JS中根据屏幕尺寸动态调整弹窗宽高，适配移动端场景。

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