Jquery 模态响应高度

我制作了一个JQuery模式，它显示一个表，该表的行可以动态添加

但是，当我添加行时，模式对于浏览器窗口来说太大了。如何使模态高度响应，使模态即使在添加行后仍保留在浏览器窗口内

这是一本书

这是我到目前为止使用的css（您将在演示中看到）：

典型地，我喜欢使用Bootstrap或基金会来关心响应设计，但是这些框架在我工作的地方是不允许的。

---

谢谢你的帮助。

< P>我调整了你的CSS，让桌子滚动，停留在模态的中间——不漂亮，但是我不知道你在找什么。关键位在所有封闭div上设置

溢出：none

。更改了下面的CSS选择器

table {
  border-collapse: collapse;
}

.modal-body {
  display: inline-block;
  border: 1px solid black;
  max-height:50%;
  overflow: auto;
}

.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: none;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

.confirmationContent {
  background-color: #fefefe;
  text-align: center;
  margin: auto;
  overflow: none;
  z-index: 9999;
  width: 80%;
  height: 80%;
}

---

我调整了你的CSS，让桌子滚动，停留在模态的中间——不漂亮，但是我不知道你在寻找什么。关键位在所有封闭div上设置

溢出：none

。更改了下面的CSS选择器

table {
  border-collapse: collapse;
}

.modal-body {
  display: inline-block;
  border: 1px solid black;
  max-height:50%;
  overflow: auto;
}

.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: none;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

.confirmationContent {
  background-color: #fefefe;
  text-align: center;
  margin: auto;
  overflow: none;
  z-index: 9999;
  width: 80%;
  height: 80%;
}

我把桌子放在一个小隔间里，上面有“mytbl”类

mytbl的css

.mytbl{
  max-height: calc(100vh - 120px);
  overflow: scroll;
  }

确认模式的css

.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;  /* I changed this one only */
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

希望这能对你有所帮助

array=[]；
$（'.openModal'）。单击（函数（）{
$（'.confirmationModal'）.css（'display'，'block'）；
});
$（'.modal close'）。单击（函数（）{
$（'.confirmationModal'）.css（'display'，'none'）；
});
$（'.add pup'）。单击（函数（）{
array.push({
狗：“汪”，
小狗：“鞠躬”，
巴克：“耶”，
摇摆者：“摇摆”
});
addPups（）；
});
addPups=函数（）{
var html=“”；
对于（var i=0；i

.buttonHolder，
.模态标题，
.模态页脚，
桌子{
文本对齐：居中；
保证金：0自动；
}
桌子{
边框：1px纯黑；
边界塌陷：塌陷；
宽度：500px；
}
.mytbl{
溢出：滚动；
}
t车身tr:n个孩子（奇数）{
背景色：#ccc；
}
.mytbl{
最大高度：计算（100vh-120px）；
}
.确认模式{
显示：无；
位置：固定；
z指数：9999；
左：0；
排名：0；
宽度：100%；
高度：100vh；
溢出：自动；
背景色：黑色；
背景色：rgba（0,0,0,0.4）；
}
.确认内容{
背景色：#fefe；
保证金：自动；
z指数：9999；
宽度：80%；
}
.确认关闭{
职位：相对！重要；
浮动：对；
右边距：-16px；
}
#模态页脚{
文本对齐：居中；
}
.btn，
.btn2{
背景：#3498db；
边界：无；
保证金：10px 5px 5px 5px；
字体系列：Arial；
颜色：#ffffff；
字体大小：20px；
填充：10px 20px 10px 20px；
文字装饰：无；
}
.btn:悬停，
.btn2：悬停{
背景#3cb0fd；
}
.btn2{
背景：#FF0000；
}
.btn2：悬停{
背景：#EE1122；
}

开放模态
幼犬名单
狗
小狗
巴克
摇摆者
不
添加小狗

我把桌子放在一个小隔间里，上面有“mytbl”类

mytbl的css

.mytbl{
  max-height: calc(100vh - 120px);
  overflow: scroll;
  }

确认模式的css

.confirmationModal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;  /* I changed this one only */
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

希望这能对你有所帮助

array=[]；
$（'.openModal'）。单击（函数（）{
$（'.confirmationModal'）.css（'display'，'block'）；
});
$（'.modal close'）。单击（函数（）{
$（'.confirmationModal'）.css（'display'，'none'）；
});
$（'.add pup'）。单击（函数（）{
array.push({
狗：“汪”，
小狗：“鞠躬”，
巴克：“耶”，
摇摆者：“摇摆”
});
addPups（）；
});
addPups=函数（）{
var html=“”；
对于（var i=0；i

.buttonHolder，
.模态标题，
.模态页脚，
桌子{
文本对齐：居中；
保证金：0自动；
}
桌子{
边框：1px纯黑；
边界塌陷：塌陷；
宽度：500px；
}
.mytbl{
溢出：滚动；
}
t车身tr:n个孩子（奇数）{
背景色：#ccc；
}
.mytbl{
最大高度：计算（100vh-120px）；
}
.确认模式{
显示：无；
位置：固定；
z指数：9999；
左：0；
排名：0；
宽度：100%；
高度：100vh；
溢出：自动；
背景色：黑色；
背景色：rgba（0,0,0,0.4）；
}
.确认内容{
背景色：#fefe；
保证金：自动；
z指数：9999；
宽度：80%；
}
.确认关闭{
职位：相对！重要；
浮动：对；
右边距：-16px；
}
#模态页脚{
文本对齐：居中；
}
.btn，
.btn2{
背景：#3498db；
边界：无；
保证金：10px 5px 5px 5px；
字体系列：Arial；
颜色：#ffffff；
字体大小：20px；
填充：10px 20px 10px 20px；
文字装饰：无；
}
.btn:悬停，
.btn2：悬停{
背景#3cb0fd；
}
.btn2{
背景：#FF0000；
}
.btn2：悬停{
背景：#EE1122；
}

开放模态
幼犬名单
狗
小狗
巴克
摇摆者
不
添加小狗

因此，无论添加了多少行，您都希望模式的内容始终在视口的高度内可见？我认为这是不可能的，因为在某个点上，您将耗尽垂直空间。你要么使用

overflo