使用按钮显示div并隐藏它，如果在div外单击

我试图创建一个函数来显示和隐藏一个div，为了隐藏div用户可以使用关闭按钮或点击div之外，但问题是隐藏div的关闭功能，如果用户点击div之外的元素之前首先运行我该div显示：

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.com/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>

---

W3School已经提供了一个解决方案。

点击这里：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

片段

// 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>

---

您已经添加了“额外的代码后，新的航运

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

应该

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

https://jsfiddle.net/bntnfhLm/

还请使用preventdefault / stopPropagation更改主体点击功能

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

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

---

尝试这个

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

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

链接地址: http://www.djcxy.com/p/83959.html

上一篇: Show div using button and hide it if click outside the div

下一篇: Hide and close a hidden div