首页 文章

使用按钮显示div并在div外单击时隐藏它

提问于
浏览 次
3

我试图创建一个显示和隐藏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>

当我点击#new-shipping按钮时，隐藏的div将不会显示，我猜是因为当我点击#new-shipping按钮时，它首先显示div然后触发body点击功能

javascript jquery html css

4 回答

  • 1

    W3Schools已经提供了解决方案 .

    点击这里：https://www.w3schools.com/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>
    回复于
  • 2

    您在新发货后的代码中添加了 ' extra

    <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();
});
    回复于
  • 0

    试试这个

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

        $(document).click(function (event) {
            $("#add-shipping-modal").hide();
        });
    回复于
  • 1

    试试这个

    $('#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();
        });
    回复于

相关问题