How can I detect a click outside of an element?, In jQuery

Now coming to the main answer - “How can I detect a click outside of an element?, In jQuery”.

 HTML 

<button>click</button>

<div class="clickinside">

<h1>Hello Test 123</h1>

</div>

 CSS 

<style>

.clickinside {

    background: wheat;

    height: 250px;

    width: 250px;

    padding-top: 10px;

    box-sizing: border-box;

    text-align: center;

    display:none;

}

button {

    margin-bottom: 20px;

    background: #32b566;

    border: none;

    padding: 10px 20px;

    font-size: 16px;

    color: #fff;

    border-radius: 3px;

}

</style>

 JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $('.clickinside').show();

  });

  

  var box = $('.clickinside');

  $(document).mouseup(function (e) {

   if (!box.is(e.target) // if the target of the click isn't the container...

   && box.has(e.target).length === 0) // ... nor a descendant of the container

   {

     box.hide();

   }

  });

});



More information please visit this url https://www.papawebdesigner.com/

</script>

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/hitesh-patidar-34253a10a/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992

Follow on pinterest    -  https://in.pinterest.com/frontendissue/