使用HTML和CSS单击图像时触发模式框

Question

我需要在单击图像（或图标）时触发模态框（按钮应位于模态框内）。是否可以单独使用HTML和CSS？或者Js是否需要这个？如果是这样，它是如何完成的？

Answer 1

你需要Javascript，但首先你应该给你的img一个像这样的id：你必须使用bootsrap模态窗口，然后在下面的代码行就足够了。

现在您可以运行您的Javascript代码（我使用Jquery）：

<script>
$('#myID').click(function() {
$("#yourmodalid").modal('show') ;
});
</script>

Answer 2

你可以参考this。但是当模态打开时，您可以滚动后部，这看起来不太好。

我没有任何第三方库，只需简单轻松地实现如下。需要小脚本。在下面的代码中，我使用了button而不是img。您可以根据需要进行编辑。

function toggleDialog()
{
    var dialog = document.getElementById("modal_container");
    dialog.style.display = (dialog.style.display=="none"?"block":"none");
}

#modal_container
{
    position:absolute;
    height: 100%;
    width:100%;
    margin: 0;
    top: 0;
    left: 0;
    background: #9e9c9c;
}
#modal
{
    position: absolute;
    height: 200px;
    width: 500px;
    background: #fff;
    border-radius: 10px;
    margin: auto;
    vertical-align: middle;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
}
.closebtn
{
    position: absolute;
    top:10px;
    right:10px;
    cursor: pointer;
}

<button onclick="toggleDialog()">Open</button>
    <div id="modal_container" style="display: none">
        <div id="modal">
            <span class="closebtn" onclick="toggleDialog()">Close</span>
        </div>
    </div>