Jquery 如何为每个div创建一个对话框？

我正在尝试制作一个小仪表板，每天早上我都可以检查它，这样我就可以很容易地判断前一天晚上是否有故障。其基本思想是每行2个flex div

我不常玩HTML或JavaScript。我试图使用纯JS使div看起来像弹出窗口，但我在z-index和flex div方面遇到了问题，所以我尝试使用一些JQuery来简化我的工作

其思想是，这些块中的每个块都隐藏了一个包含更多信息的“details”div。单击这些框应该将该div的测试显示为一个对话框

我可以让一个工作得很好。我的问题是尝试初始化所有对话框，以便我可以单击打开它们。在阅读了如何实现后，我试图实现它

我的问题是，我没有得到任何回应或反馈，所以我不知道我做错了什么

$（文档）.ready（函数（）{
//初始化此页上的所有对话框
$（'.details'）。每个（函数（）{
$（此）。对话框({
自动打开：错误，
宽度：450，
身高：550，
按钮：{
废话：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
});
//捕获所有作业类表上的单击事件。
$（'.flex项'）。单击（函数（）{
//使用details类查找子元素并打开其对话框
$（this.find（'.details'）。对话框（'open'）；
});
});
#容器{
宽度：1050px；
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
调整内容：灵活启动；
}
#容器。弹性项{
背景：番茄；
填充物：5px；
宽度：500px；
高度：80px；
边缘顶部：10px；
z指数：500；
游标：默认值；
}
.flex项。作业{
字体大小：粗体；
字体大小：1.3em；
颜色：白色；
}
.flex item.dataGood，
.数据库{
字体大小：粗体；
字号：2em；
文本对齐：居中；
}
.flex项目。详细信息{
背景色：白色；
可见性：隐藏；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：6px；
填充：8px0；
位置：绝对位置；
z指数：10000；
底部：125%；
左：50%；
左边距：-80px；
}
.flex项目。数据良好{
背景颜色：绿色；
}
.flex项.dataBad{
背景色：红色；
}

标题
日期
这是隐藏的东西
KANOR1上的夜间全备份
03/08/2017 20:00:00
这是隐藏的东西
DataMaint.KANSAGESQL上的完整备份
03/08/2017 20:00:00
这是隐藏的东西
SQL08R2VM上的备份失败错误18204
03/08/2017 20:00:00
这是隐藏的东西
我想这对你会有用的：

$(this).find( ".details" ).dialog( "destroy" );
  // Capture click event on all job class tables.
  $('.flex-item').click(function() {
      $(this).find( ".details" ).dialog( "instance" );
      $(this).find( ".details" ).dialog({
          height: 400
       });
  });

使用CSS悬停和
transform



#容器{
宽度：1050px；
显示器：flex；
柔性流：行换行；
证明内容：周围的空间；
调整内容：灵活启动；
边框：实心，1px；
}
#容器。弹性项{
位置：相对位置；
背景：番茄；
填充物：5px；
宽度：500px；
高度：80px；
边缘顶部：10px；
游标：默认值；
}
.flex项。作业{
字体大小：粗体；
字体大小：1.3em；
颜色：白色；
}
.flex item.dataGood，
.数据库{
字体大小：粗体；
字号：2em；
文本对齐：居中；
}
.flex项目。详细信息{
背景色：#555；
颜色：#fff；
文本对齐：居中；
填充：8px0；
位置：绝对位置；
最高：100%；
左：0；
右：0；
变换：scaleY（0）；
}
.flex项目。数据良好{
背景颜色：绿色；
}
.flex项.dataBad{
背景色：红色；
}
.flex项：悬停{
z指数：10；
}
.flex项：悬停。详细信息{
变换：scaleY（1）；
}

标题
日期
这是隐藏的东西
KANOR1上的夜间全备份
03/08/2017 20:00:00
这是隐藏的东西
DataMaint.KANSAGESQL上的完整备份
03/08/2017 20:00:00
这是隐藏的东西
SQL08R2VM上的备份失败错误18204
03/08/2017 20:00:00
这是隐藏的东西
你能解释一下这对我有什么帮助吗？我要理解的是，将元素还原到其原始状态，这样我的init函数现在就没用了？实例应该返回一个您不使用的对象，所以我不知道它在这里做什么。回答我的第一个问题可能会解释您仅在代码段中设置高度的原因。我们需要设置对话框。在打开它之前，这就是为什么我给出了高度，而且你的对话框初始化是无用的。我理解这一点，但我目前尝试使用
$（'.details'）。each（function（）{…
。那么我不应该这样做吗？在我的示例中，你的JS应该取代我的JS吗？对我来说，这似乎是一个非常简单的解决方法。谢谢。所以0的scaley是隐藏它的东西，1的scaley设置了允许我们看到它的div的正常比例。它也出现在下面的div上。太好了。@Matt这就是correct，scale on
details
show/hide，z-index on
flex item
将它们移到顶部，即使我有一个有效的解决方法，如果有人知道Jquery为什么不工作，我也会欢迎这些信息。我猜你需要唯一的id来解决这个问题：…如果这对你有帮助，我可以在中添加注释和链接我的answer@LGSon这看起来很有希望。我正忙着实现你当前的答案，但我也会看看。无论如何，我都会将其添加到你的答案中。感谢所有的帮助。不客气……我添加了我答案的链接