如何在外部点击

时间：2016-06-01 16:00:09

标签： javascript

我在下面使用过这个JavaScript：

$('body').click(function() {
  if (!$(this.target).is('#popUpForm')) {
    $(".modalDialog").hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="openModal" class="modalDialog">
    <div class="modalClose">
      <a href="#close" title="Close" class="close-circle" style="color:white; text-decoration:none; font-size:14px;"></a>
      <div id="signup-header">
        <h4>Request a brochure, with a free demo</h4>
        <h5>Please Fill in the form below: </h5>
      </div>

      <form id="popUpForm" class="tryMeForm" name="" onsubmit="return formCheck(this);" method="post" action="">
        <div class="InputGroup">
          <input type="text" name="name" id="name" value="" placeholder="First Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="lastname" id="lastname" value="" placeholder="Last Name*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Email" id="Email" value="" placeholder="Email Address*" />
        </div>
        <div class="InputGroup">
          <input type="text" name="Phone" id="Phone" value="" placeholder="Phone Number*" />
        </div>
        <div class="InputGroup">
          <textarea name="message" id="message" class="" placeholder="How we can help?"></textarea>
        </div>
        <div class="submit">
          <input class="button_submit1 button-primary button1" type="submit" value="Submit" />
        </div>

      </form>
    </div>
  </div>
</body>

这允许我在点击它外面时关闭模态。但是，即使我点击内部也会关闭。如何才能使其仅在外部和关闭按钮上关闭，而不是在内部关闭，这样用户仍然可以输入他们的详细信息？

7 个答案:

答案 0 :(得分：11)

使用父节点#openModal（容器）代替#popUpForm（表单）：

$('body').click(function (event) 
{
   if(!$(event.target).closest('#openModal').length && !$(event.target).is('#openModal')) {
     $(".modalDialog").hide();
   }     
});

答案 1 :(得分：2)

为此添加内容，以供将来的读者使用。

另一种在外部单击时消除模式的方法涉及利用javascript事件的冒泡性。

在典型的模式HTML结构中

<body>
  <div id="root">
    -- Site content here
  </div>
  <div id="modal-root">
    <div class="modal"></div>
  </div>
</body>

点击.modal会导致点击事件像这样.modal -> #modal-root -> body传播，而在模态外部点击只会通过#modal-root -> body。

由于我们可以完全停止点击事件的传播，并且如果这不会干扰任何其他代码，那么我们只需监听.modal和#modal-root中的点击事件。 “模态根”点击将消除模态，而“模态”点击将停止传播click事件，因此永远不会到达“模态根”。

为更加清楚起见，下面是codepen.io中的代码：https://codepen.io/nbalaguer/pen/PVbEjm

答案 2 :(得分：1)

这不是最有效的方法，但它会起作用。我们的想法是遍历树并检查父级是否是您不想在除了它之外的任何地方隐藏的那个的ID。

$(document).on('click', function(e) {    
    var p = e.target;
    while(p) {
        console.log(p);
        if(p.id) {
            if(p.id == 'openModal') {
                return;
            }
        }
        p = p.parentElement;
    }
    $("#openModal").hide();
});

答案 3 :(得分：1)

$('body').on('click', '.modal-open', function(e) {
    
    $('.modal-background, .modal').show();
    e.preventDefault();
})
.on('click', '.modal-close', function(e) {
    
    $('.modal-background, .modal').hide();
    e.preventDefault();
});

if ( !$('.modal-background.modal-close').length ) {
    $('<div/>').addClass('modal-background modal-close').appendTo('body');
}
body {
    background: #ccc;
    overflow-y: scroll;
    padding: 15px;
}

button {
    cursor: pointer;
}

.modal {
    width: 400px;
    margin: 5% auto 0 -200px;
    padding: 10px;
    background: #eee;
    display: none;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 10;
}

.modal-background {
    background: rgba(0, 0, 0, 0.5);
    /* background: transparent; */
    /* position: absolute; */
    position: fixed;
    z-index: 9; /* .modal[zIndex] - 1 */
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    display: none;
}
<p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button type="button" class="modal-open">Open modal</button>

<div class="modal">
    <p>
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <p>
        <button type="button" onclick="$('.dummy-container').toggle()">Toggle something for testing</button>
    <p>
    <p class="dummy-container" style="display: none;">
        Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
    <p>
        <button type="button" class="modal-close">Close modal</button>
    </p>
</div>

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

答案 4 :(得分：1)

这似乎是最终为我制定的代码：

$(document).click(function (e) {
    if ($(e.target).is('#openModal')) {
        $('#openModal').fadeOut(500);
    }

});

$("#modalNo").click(function () {
    $("#openModal").fadeOut(500);


});
$(".close").click(function () {
    $("#openModal").fadeOut(500);
});
$(".close-circle").click(function () {
    $("#openModal").fadeOut(500);
});

答案 5 :(得分：0)

这对我有用： 我在模态窗口中有一个图像，所以如果有人在图像外部单击（居中）：

html代码： 

<div id="modal_div"><img id="image_in_modal_div" src="image.jpg" /></div>

ccs代码： 

#modal_div {
        display: none;
          position: fixed; 
        z-index: 1; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
          background-color: transparent;
}

#image_in_modal_div {
       left: 50%;
       top: 30%;
       position: absolute;
}

混合的jQuery和javascript代码： 

$( document ).ready(function() {

    $("#element_that_opens_modal").click(function(){
        $("#modal_div").show();
    });

    window.onclick = function(event) {
       if (event.target.id != "image_in_modal_div") {
          $("#modal_div").hide();
       }
    }

});

答案 6 :(得分：0)

简单：

const string FILENAME = @"c:\temp\test.xml"; static void Main(string[] args) { string xml = File.ReadAllText(FILENAME); XDocument doc = XDocument.Parse(xml); List<XElement> entries = doc.Descendants("Entry").ToList(); string name1 = (string)entries[0].Attributes().Where(x => x.Name.LocalName == "Name").FirstOrDefault(); string name2 = (string)entries[1].Attributes().Where(x => x.Name.LocalName == "Name").FirstOrDefault(); }

sharedWithMe=false sharedWithMe!=true not(sharedWithMe=true) etc...

var images_modal = document.getElementById('images-model-div');

var videos_modal = document.getElementById('video-model-div');

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

if (event.target == images_modal) {

images_modal.style.display = "none";

}

if (event.target == videos_modal) {

videos_modal.style.display = "none";

相关问题
最新问题