如何在点击锚标签时将div显示为弹出窗口？

Question

我想将div显示为点击锚标记图像的弹出窗口。 我有一个主图像和四个垂直缩略图侧面。

在主图像上，顶角有一个锚标记图像。单击此图像后，我希望整个主图像及其缩略图显示在弹出窗口中。

Answer 1

如果我没错，jQuery核心没有任何方法可以显示模式\弹出窗口。

您可以通过以下方式在vanilla JavaScript中实现您的请求：

<a id="picture1" data-id="1" href="#" onclick="showDialog(this);">
    <!-- your img or whatever -->
</a>

<dialog id="pictureDialog">
    <!-- your dialog content -->
</dialog>

<script>
    function showDialog(element) {
        var id = e.getAttribute("data-id");
        //do some setup for your dialog
        document.getElementById("pictureDialog").showModal(); 
    } 
</script>

保留在jQuery系列中，你可以使用jQuery UI简单地打开一个模态： http://api.jqueryui.com/dialog

或者添加你的​​风格框架，比如Bootstrap： http://getbootstrap.com/javascript/#modals