I tried to create a function to show and hide a div, to hide the div user can use close button or click outside the div, but the problem is the close function to hide the div if user click element outside the div run first before i the div is showed:

html:

$('#close-add').on('click', function() {
  $("#add-shipping-modal").hide();
});

$('#new-shipping').on('click', function() {
  $("#add-shipping-modal").show();
});

$('body').click(function(event) {
  setTimeout(
    if (!$(event.target).closest('#add-shipping-modal').length && !$(event.target).is('#add-shipping-modal')) {
      if ($("#add-shipping-modal").css('display') != 'none') {
        $("#add-shipping-modal").hide();
      }
    }
  });
});

<script src=".1.1/jquery.min.js"></script>
<button id="new-shipping'">Open Div</button>
<div id="add-shipping-modal" style="display:none">
  <button id="close-add">Close Div</button>
  <p> Show Me </p>
</div>

I tried to create a function to show and hide a div, to hide the div user can use close button or click outside the div, but the problem is the close function to hide the div if user click element outside the div run first before i the div is showed:

html:

$('#close-add').on('click', function() {
  $("#add-shipping-modal").hide();
});

$('#new-shipping').on('click', function() {
  $("#add-shipping-modal").show();
});

$('body').click(function(event) {
  setTimeout(
    if (!$(event.target).closest('#add-shipping-modal').length && !$(event.target).is('#add-shipping-modal')) {
      if ($("#add-shipping-modal").css('display') != 'none') {
        $("#add-shipping-modal").hide();
      }
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new-shipping'">Open Div</button>
<div id="add-shipping-modal" style="display:none">
  <button id="close-add">Close Div</button>
  <p> Show Me </p>
</div>

when i click the #new-shipping button, the hidden div won't show up, i guess it's because when i click the #new-shipping button, it shows the div first and then trigger the body click function

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 7, 2017 at 10:01 Maertz 4,95222 gold badges2121 silver badges2727 bronze badges asked Dec 7, 2017 at 9:41 Idham ChoudryIdham Choudry 6371313 silver badges3131 bronze badges 3

• setTimeout is closed – Jason Delaney Commented Dec 7, 2017 at 9:48
• 1 don't use setTimeout, use @vipin answer! – Kresimir Pendic Commented Dec 7, 2017 at 9:49
• Replace <button id="new-shipping'">Open Div</button> with <button id="new-shipping">Open Div</button> there is an extra single the id attribute – user6778410 Commented Dec 7, 2017 at 9:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

There is already a solution provided at W3Schools.

Check Here: https://www.w3schools./howto/tryit.asp?filename=tryhow_css_modal

Snippet

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

You have added ' extra in your code after new-shipping

<button id="new-shipping'">Open Div</button>

should be

 <button id="new-shipping">Open Div</button>

https://jsfiddle/bntnfhLm/

Also please change the body click function by using preventdefault/stopPropagation

$("#add-shipping-modal").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $("#add-shipping-modal").hide();
});

try this

 $('#new-shipping').on('click', function () {
            $("#add-shipping-modal").show();
            return false;
        });

        $(document).click(function (event) {
            $("#add-shipping-modal").hide();
        });

try this

$('#close-add').on('click', function () {
            $("#add-shipping-modal").hide();
        });

        $('#new-shipping').on('click', function () {
            $("#add-shipping-modal").show();
            return false;
        });
        $("#add-shipping-modal").click(function () { return false; });

        $(document).click(function (event) {
            $("#add-shipping-modal").hide();
        });