Question

我尝试使用W3 CSS模式，找到here来创建图片库。

下面是显示我存储在文件夹中的一些图像的代码。

<div class="panel-body">
    <div class="w3-content w3-section" style="max-width:500px">
        <table>
            <tr>
                <td colspan="2">
                    <asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5">
                        <ItemTemplate>
                            <a id="imageLink" href='<%# Eval("ImageName","~/SlideImages/{0}") %>' title='<%#Eval("Description") %>' runat="server" style="width:100%;cursor:pointer"
                               onclick="onClick(this)" class="w3-hover-opacity">
                                <asp:Image ID="Image1" cssClass="w3-circle" ImageUrl='<%# Bind("ImageName", "~/SlideImages/{0}") %>' runat="server" Width="50%" Height="84" />
                            </a>
                        </ItemTemplate>
                    </asp:DataList>
                </td>
            </tr>
        </table>
    </div>
</div>

如果我用下面的代码替换上面的表格，那么模态成功运作：

 <img src="SlideImages/one.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity"/>

所以我认为问题出在桌子的某个地方，但我无法弄清楚在哪里。

以下是模态的代码：

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
    <span class="w3-closebtn w3-hover-red w3-text-white w3-xxlarge w3-container w3-display-topright">&times;</span>
    <div class="w3-modal-content w3-animate-zoom">
        <img id="img01" style="width:100%" />
    </div>
</div>

这是JavaScript

<script>
    function onClick(element) {
        document.getElementById("img01").src = element.src;
        document.getElementById("modal01").style.display = "block";
    }
</script>

当我点击其中一个图像时，屏幕开始变暗，就像模态即将出现一样，但它只显示this 我真的很感激任何有关问题的建议

W3 CSS模式不显示

0 个答案: