在链接单击时显示图像，在外部单击时将其隐藏

Question

I am trying to show images on a link click and hiding that image if clicked outside. After trying so many solutions for this I have came up with like below code.

<script>
    function setImageVisible(id, visible) {
        var img = document.getElementById(id);
        img.style.visibility = (visible ? 'visible' : 'hidden');
    }
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center" onclick="javascript:setImageVisible('popup1', false)">
    <a href="javascript:setImageVisible('popup1', true)"><div id="Btn7"></div></a>
    <img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
</div>

The above code is working fine. But when I add other image like below, its not working. When I clicked outside then images are not hiding.

<script>
    function setImageVisible(id, visible) {
        var img = document.getElementById(id);
        img.style.visibility = (visible ? 'visible' : 'hidden');
    }
    $(document).click(function() {
        var img1 = document.getElementById('popup1');
        var img2 = document.getElementById('popup2');
        img1.style.visibility = 'hidden';
        img2.style.visibility = 'hidden';
    });
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center">

    <a href="javascript:setImageVisible('popup1', true)"><div id="Btn7"></div></a>
    <img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
    <a href="javascript:setImageVisible('popup2', true)"><div id="Btn8"></div></a>
    <img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" />

</div>

Can anyone please suggest what should I do ?

Answer 1

Remove inline event handler and write for common click event ,

1) bind the click event for all a tag inside wrapper id and then show the images when link is clicked

2) bind the click event for document and hide the all images when clicking outside of link

$("#popup1,#popup2").hide();
$("#Btn7,#Btn8").click(function (e) {
    e.stopPropagation();
    $(this).next().show();
})
$(document).click(function () {
    $("#popup1,#popup2").hide();
})

DEMO

Answer 2

Sure, as you have added a tag jquery , I am asking you to do it in a simple way like this:

Snippet:

 $(function () { $(".imgPreview").hide(); $(".unstyled li a").click(function () { $(".imgPreview").show().find("img").attr("src", $(this).attr("href")); return false; }); $("body").click(function () { $(".imgPreview").hide(); }); }); 

 * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} body {margin: 10px;} li {margin: 5px;} .unstyled, .imgPreview {float: left; width: 50%;} .unstyled, .imgPreview img {max-width: 100%;} p {margin: 5px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p>Click on a link to show the respective image. Click outside to hide it!</p> <p>Also you can right click and open it to open the image in a new tab!</p> <ul class="unstyled"> <li><a href="http://placehold.it/350x150">350x150</a></li> <li><a href="http://placehold.it/750x150">750x150</a></li> <li><a href="http://placehold.it/350x150">350x150</a></li> <li><a href="http://placehold.it/100x100">100x100</a></li> <li><a href="http://placehold.it/350x150">350x150</a></li> </ul> <div class="imgPreview"> <img src="" alt="" /> </div> 

Answer 3

You don't need jQuery to do this.

 function setImageVisible(id, visible) { var img = document.getElementById(id); img.style.visibility = (visible ? 'visible' : 'hidden'); } function hideAll() { var img1 = document.getElementById('popup1'); var img2 = document.getElementById('popup2'); img1.style.visibility = 'hidden'; img2.style.visibility = 'hidden'; } function click(e) { e.stopImmediatePropagation(); var id, el = this; while (el) { el = el.nextSibling; if (el.nodeName === 'IMG') { // finds the next sibling img element id = el.id; el = null; } } hideAll(); // hide all images setImageVisible(id, true); // show the right one }; document.addEventListener('click', hideAll); var btns = document.querySelectorAll('.btn'), i = 0, len = btns.length; for (; i < len; i++) { btns[i].addEventListener('click', click); } 

 img { width: 100px; height: 100px; border: 1px solid black; } 

 <div id="wrapper" style="margin-top: -5px; text-align:center" align="center"> <div class="btn" id="Btn7">Image 1</div> <img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" /> <div class="btn" id="Btn8">Image 2</div> <img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" /> </div> 

Answer 4

Try this simple demo

<!DOCTYPE html>
<html>
<head>
    <script src = "jquery-1.10.2.min.js"></script>
</head>
<body>
    <a href="#" id="imageLink">Click to show image</a>
    <img id="image" style="display:none;height:500px; width:500px;">   
    <script type="text/javascript">

        $('#imageLink').click(function (e){
            e.stopPropagation();
            $('#image').show();

        });

        $('body').click(function () {
            $('#image').hide();
        })
    </script>
</body>
</html>

Answer 5

    $(document).ready(function () {
        $("#linkbutton_id").click(function () {
            alert("The paragraph was clicked.");
            if($("#image").hide())
            {
                $("#image").show();
                 return false;
            }

        });
});


$(document).ready(function () {
$("#div_id").click(function(){

    $("#image").hide();
    });
});

Code plus output link https://jsfiddle.net/umxrn0Lg/2/

fullscreen output link https://jsfiddle.net/umxrn0Lg/3/embedded/result/