如何从Bootstrap模态框中调整浏览器窗口大小？

嘿，这个问题我熟！我来给你拆解清楚怎么解决～

首先得明确你用的是哪种模态框——是浏览器原生的弹窗式模态窗口，还是页面内用div做的自定义模态框？两种情况的处理方式不一样，而且还要注意现代浏览器的安全限制哦：

情况1：浏览器原生模态弹窗（比如用window.showModalDialog打开的子窗口） #

这种情况下，你在模态窗口里要操作父窗口的大小，得用window.opener对象，它专门指向打开这个模态框的父窗口。之前试的this（指向DOM元素）和parent（多用于iframe场景）肯定不对，换opener就对了！

举个按钮点击触发的例子：

// 模态框内的按钮点击事件
document.getElementById("resizeParentBtn").addEventListener("click", function() {
  // 把父窗口调整到800x600的固定大小
  window.opener.resizeTo(800, 600);
  
  // 或者相对父窗口当前大小调整，比如宽加100，高加50
  // window.opener.resizeBy(100, 50);
});

情况2：页面内自定义模态框（比如用CSS/JS实现的弹窗） #

这种模态框其实还是在当前浏览器窗口里，所以直接用window对象就行，但要注意现代浏览器的安全限制：

• 只有当窗口是由当前页面通过window.open()主动创建的，脚本才能调整它的大小；
• 如果是用户手动打开的主窗口，大部分浏览器会禁止脚本随意调整大小（防止恶意网站乱改窗口）。

给你写个示例代码：

// 打开模态框时触发调整
function openCustomModal() {
  // 先显示你的模态框（比如把modal的display改成block）
  document.getElementById("myModal").style.display = "block";
  
  // 尝试调整当前窗口大小
  if (window.resizeTo) {
    window.resizeTo(800, 600);
  } else {
    console.log("浏览器不允许脚本调整窗口大小哦");
  }
}

// 模态框内按钮触发调整
document.getElementById("modalResizeBtn").addEventListener("click", function() {
  // 相对当前大小增加50px宽和高
  window.resizeBy(50, 50);
});

为啥之前的this和parent没用？ #

• this在按钮的点击事件里，指向的是按钮这个DOM元素，不是窗口对象，所以调用resize方法肯定无效；
• parent一般是iframe场景下用的，指父iframe的窗口对象，如果你的模态框不在iframe里，parent其实和window是同一个对象，自然也解决不了问题。

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