How to show div and hide div click outside of the div or login form by using jquery

Post by: Public
on: 10-02-20

Do you want to display or show your div click on specific id and hide div click out side of the div. So this post is for you.

Lets have a example i have a login icon and when i click on that icon i will display a login form & when i click out side of the login from i will hide. For doing this function we use jquery..

Suppose i have a login icon as blew html code

<span id="loginButton" >
    <a href="#"><img src=""> <span>Sign in</span></a>
</span>

When i click on that icon it will show a from as blew html code code

<div id="loginBox" class="text-left" style="display: none;">
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
</div>

NB: In upper HTML file we use style="display: none;" for initially hide when click it will display

Now we use some css for position absolute for login form

#loginBox {
    padding: 20px 20px 15px;
    border-radius: 2px;
    width: 320px;
    top: 39px;
    right: 0;
    border: 0;
    left: 70px;
    position: absolute;
    background: #fff;
    z-index:99999;
    box-shadow: -1px 1px 6px 0px rgba(0,0,0,0.2);
}

Now our login form and login icon is ready we use jquery for show and hide click on outside

// simple click to show form
$("#loginButton").click(function () {
    $("#loginBox").show();
});
// target for hide outside click 
$(document).click(function (e) {
    if (!$(e.target).hasClass("#loginButton") 
        && $(e.target).parents("#loginBox").length === 0) 
    {
        $("#loginBox").hide();
    }
});

By using this jquery file you can easily show your login form & hide login form by click on outside of the form.

Thanks please share with your friends if it's help you.

How to show div and hide div click outside of the div or login form by using jquery

All Categories

How to show div and hide div click outside of the div or login form by using jquery

Comments

All Categories