0

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

                <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>

我在本教程中使用了这个方法来制作模态窗口。

但是，当我单击链接以显示 XMLText 时，当它们应该不同时，它会显示所有行的第一个 XMLText。如果我在没有 div 的情况下正常显示此内容，则所有 XMLTexts 都是该列的正确元素。我想我不明白为什么这不起作用（因为它是一个隐藏的 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。

（向新观众声明：我对网络编程和divs 的概念非常陌生）

4

1 回答 1

0

您可以使用计数器使 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">

希望这可以帮助！

编辑：根据下面的评论，我在 中添加了一个类div，id所以你可以用 CSS 来定位那些。简单地全部替换#xmlmodal为.showhidexmlmodal. （当然，您可以使用任何您想要的类名，因为它不是 CSS 中现有的类。）
注意：仅在 CSS 文件中，而不是在href上例中的 s 中！

于 2013-07-23T19:34:16.227 回答