使用HTML和CSS单击图像时触发模式框 [英] Triggering a modal box on clicking an image using HTML and CSS

问题描述

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

/ pen / HhAerrel =nofollow noreferrer>这个。但是，当模式打开时，您可以滚动后面部分，这看起来不太好。

我没有任何第三方库，可以轻松实现。
需要小型脚本。在下面的代码中，我使用了按钮而不是 img 。您可以像编辑它一样编辑它。

$ toggle_dialog（）{var dialog = document.getElementById（modal_container）; dialog.style.display =（dialog.style.display ==none？block：none）;}

  #modal_container {position：absolute;身高：100％;宽度：100％;保证金：0;顶部：0;左：0;背景：＃9e9c9c;} #modal {position：absolute; height：200px;宽度：500px;背景：#fff; border-radius：10px;保证金：汽车; vertical-align：middle;顶部：0;左：0;正确：0; bottom：0;}。closebtn {position：absolute;顶部：10px的;右：10px的; cursor：pointer;}  

< button onclick =toggleDialog （）>开< /按钮> < div id =modal_containerstyle =display：none> < div id =modal> < span class =closebtnonclick =toggleDialog（）>关闭< / span> < / DIV> < / div>

I need to trigger a modal box (a button should be inside the modal box) on clicking an image (or icon). Is it possible using HTML and CSS alone ? Or is Js required for this ? If so, how is it done ?

解决方案

You can refer this. But you can scroll the back part when the modal is open, which will not look good.

I have simply and easily achieved as below without any third party libraries. Small scripting needed. In the following code I have used a button instead of img. You can edit it as if you want.

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>

这篇关于使用HTML和CSS单击图像时触发模式框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！