css - 在循环列表中使用 div

Question

所以我目前正在处理这个元素，我在 MVC 4 ListView 中显示一个列表。我的一个字段有大量数据，所以我没有在表格中显示这些信息，而是制作了一个 CSS 模态窗口来显示。这是我的带有 ListView 和可点击模态视图的 HTML 片段:

                <table class="srrTable">
                    <tr>

                        <th>
                             Dwelling Id
                        </th>
                        <th>
                             Postal Address Id
                        </th>
                        <th>
                            Insuance Policy Id
                        <th>
                            XML Text
                       </th>
                    </tr>

                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.DwellingIdentifier)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.PostalAddressIdentifier)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.InsurancePolicyIdentifier)
                            </td>
                            <td>
                                <a class="xmllabel" href="#xmlmodal">View</a>
                                <div id="xmlmodal">
                                    <div class="xmlmodal">
                                        <a class="close" href="#">Close</a>
                                        <h2>XMLText</h2>
                                        <p>@Html.DisplayFor(modelItem => item.XMLText)</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    }

                </table>

我用了this take在 this tutorial制作模态窗口。

但是，当我单击我的链接以显示 XMLText 时，它会显示所有行的第一个 XMLText，而它们应该是不同的。如果我在没有 div 的情况下正常显示它，则所有 XMLText 都是该列的正确元素。我想我不明白为什么这不起作用(因为它是一个隐藏的 div？因为链接？)并且只是在寻找解释以及如何让我的 XMLText 正确显示的一些指导。

至于CSS，我完全按照教程做的，所以请引用我的链接。我将不胜感激任何帮助，谢谢!

---

重新更新:

实现建议后，我表格中的字段如下所示:

.
.
.
                            <div class="Hidden">@(counter++)</div>
                            <td>
                            <a class="xmllabel" href="#xmlmodal@(counter)">View</a>
                            <div id="xmlmodal@(counter)" class="showhidexmlmodal">
                                <div class="showhidexmlmodal@(counter)">
                                    <a class="close" href="#">Close</a>
                                    <h2>XMLText</h2>
                                    <p>@Html.DisplayFor(modelItem => item.XMLText)</p>
                                </div>
                            </div>
                            </td>
.
.
.

我按照建议添加了 .showhidexmlmodal 并更新了我的 CSS:

a.xmllabel {
  display: block;
  margin: 20px auto;
  width: 50px;
  height: 50px;
  background: #232323;
  color: #fff;
  text-align: center;
  font: 14px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
}

a.xmllabel:hover {
  background: #444;
  cursor: pointer;
}

input#xmltoggle {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

#xmlmodal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    -webkit-transition: opacity 1s ease, z-index 1s ease;
    -moz-transition: opacity 1s ease, z-index 1s ease;
    -ms-transition: opacity 1s ease, z-index 1s ease;
    -o-transition: opacity 1s ease, z-index 1s ease;
    transition: opacity 1s ease, z-index 1s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.showhidexmlmodal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: auto;
  padding: 20px;
  width: 500px;
  height: 200px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7 );

  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);

  -webkit-transition: opacity 1s ease, z-index 1s ease;
  -moz-transition: opacity 1s ease, z-index 1s ease;
  -ms-transition: opacity 1s ease, z-index 1s ease;
  -o-transition: opacity 1s ease, z-index 1s ease;
  transition: opacity 1s ease, z-index 1s ease;
}

.showhidexmlmodal a.close {
    position: absolute;
    display: block;
    top: 7px;
    right: 7px;
    background: #232323;
    color: #fff;
    text-align: center;
    font: 14px/1.5 Helvetica, Verdana, sans-serif;
    text-decoration: none;
    padding: 0 5px;
}

.showhidexmlmodal h2 {
  color: #232323;
  text-transform: uppercase;
  font: 35px/1.5 Helvetica, Verdana, sans-serif;
}

.showhidexmlmodal p {
  color: #444;
  text-align: left;
  font: 13px/1.8 Georgia, Times, sans-serif;
}

.showhidexmlmodal:target, .showhidexmlmodal:target > .xmlmodal {
  opacity: 1;
  z-index: 2;
}

@media all and (max-width: 767px) {
    .xmlmodal {
        width: 300px;
        height: 250px;
    }

        .xmlmodal h2 {
            font: 30px/1.5 Helvetica, Verdana, sans-serif;
            text-transform: uppercase;
        }

    .xmlmodal p {
        font: 12px/1.8 Georgia, Times, sans-serif;
    }
}

此代码现在显示正确的 XML 文本，但我的黑色封面 #xmlmodal 没有显示。有什么建议吗？

它忽略了与 xmlmodal id 相关的 css。

(新观众免责声明:我对网络编程和 div 的概念非常陌生)

Answer 1

您可以使用计数器使 div 的 ID 唯一。

我手边没有 Visual Studio，但我认为它是这样的:

@{var counter = 0;}
@foreach (var item in Model)
  .
  .
  .
    @{counter++;}
    <a class="xmllabel" href="#xmlmodal@(counter)">View</a>
    <div id="xmlmodal@(counter)" class="showhidexmlmodal">

希望这对您有所帮助!

编辑:根据下面的评论，我使用 id 向 div 添加了一个类，因此您可以使用 CSS 查明它们。简单地将所有 #xmlmodal 替换为 .showhidexmlmodal。 (当然，您可以使用任何您想要的类名，因为它不是 CSS 中的现有类。)
注意:仅在 CSS 文件中，不在上面示例中的 href 中!