当我点击页面上的任何地方时，如何使对象消失？

Question

当我点击页面上的任何位置时，如何使对象，文本和图片消失？

HTML中的

：

<button type="button" class="btn btn-info btn-lg hide-modal" id="greeting2-btn" data-toggle="modal" data-target="#mysecondModal">Greeting</button>
<div class="modal fade" id="mysecondModal" role="dialog" data-backdrop="static" data-keyboard="false" style="visibility:hidden">
    <div class="modal-dialog modal-lg">
        <a href="javascript:void(0);" onclick="changesecondImage();">
        <div class="modal-content" style=" top : 100px; background:#f9f9f9; width: 300px; text-align: center; left:350px;  font-family: duepuntozero; border:4px solid #922C05; border-radius: 20px; ">
            <p data-dismiss="modal">Trying</p>
        </div>
        <img src="./graphics/arrow.png" style="width: 8%; position:absolute; top: 530px; left:700px;height: auto solid #f9f9f9;">
        <img src="./graphics/Smile.png" style=" width: 50%; height: auto solid #f9f9f9;">
    </div>
</div>

在Javascript中：

jQuery(document).ready(function($) {  
    $(window).load(function(){
        $('#preloader').fadeOut('slow',function(){
            $(this).remove();
        });
        document.getElementById('greeting4-btn').click();
        document.getElementById('greeting3-btn').click();
        document.getElementById('greeting2-btn').click();
        document.getElementById('greeting-btn').click();
    });
});

function changesecondImage(){
    document.getElementById("mythirdModal").style.visibility = "visible";
}

我想点击任意位置，“按钮”中的图片和文字消失..

Answer 1

您可以尝试这样的事情

＆＃13;

＆＃13;

$(document).ready(function($) {  
    $(document).click(function(){
       $("#divid").hide();
    });
});

＆＃13;

<div id="divid"> Text goes here ............
        <img src="/arrow.png" style="width:100px;height:100px">

    </div>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>

＆＃13;

＆＃13;

＆＃13;