当我单击除选定区域以外的任何位置时，模态关闭

Question

我制作了三个框，每个框都有自己的按钮，单击它们会弹出各自的模态，当我单击其他任何位置时它们都会关闭，您可以通过下面共享的链接看到它们。 现在出现的问题是，当我单击模态本身（在模态上）时，它已关闭，这是错误的。 我正在尝试解决此问题，但没有得到足够的解决方案，可能会得到你们的帮助。

在此处输入链接说明

片段：

 $(window).on('load', function () { $(".btnOne").click(function (event) { event.stopPropagation(); $(".modalOne").addClass("open"); $(".modalTwo").removeClass("open"); $(".modalThree").removeClass("open"); }); $(".btnTwo").click(function (event) { event.stopPropagation(); $(".modalTwo").addClass("open"); $(".modalThree").removeClass("open"); $(".modalOne").removeClass("open"); }); $(".btnThree").click(function (event) { event.stopPropagation(); $(".modalThree").addClass("open"); $(".modalOne").removeClass("open"); $(".modalTwo").removeClass("open"); }); //Keep an eye on this part $('html').click(function () { $(".modal").removeClass("open"); }); }); 

 * { box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; } html, body { margin: 0; padding: 0; } .container { width: 1170px; margin: 20px auto; } .box { float: left; width: 300px; height: 300px; margin: 0 10px; padding: 20px; position: relative; border-radius: 5px; background: #eee; } .btn { float: left; font-size: 14px; line-height: 18px; color: #fff; cursor: pointer; padding: 10px; position: relative; border: 0; border-radius: 5px; text-transform: uppercase; outline: 0; z-index: 2; background: #f00; } .modal { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; z-index: 1; background: rgba(0, 0, 0, 0.6); } .modal.open { opacity: 1; z-index: 3; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="box"> <button type="button" class="btn btnOne">button</button> <div class="modal modalOne"> 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. </div> </div> <div class="box"> <button type="button" class="btn btnTwo">button</button> <div class="modal modalTwo"> 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. </div> </div> <div class="box"> <button type="button" class="btn btnThree">button</button> <div class="modal modalThree"> 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. </div> </div> </div> 

Answer 1

诀窍是检查.modal.open

$('html').click(function(evt) {
  if (!$(evt.target).closest(".modal").is(".modal.open")) {
    $(".modal.open").removeClass("open");
  }
});

看看这个： http : //jsfiddle.net/7ecpx3pg/

Answer 2

 $(".btnOne").click(function(event) { event.stopPropagation(); $(".modalOne").addClass("open"); $(".modalTwo").removeClass("open"); $(".modalThree").removeClass("open"); }); $(".btnTwo").click(function(event) { event.stopPropagation(); $(".modalTwo").addClass("open"); $(".modalThree").removeClass("open"); $(".modalOne").removeClass("open"); }); $(".btnThree").click(function(event) { event.stopPropagation(); $(".modalThree").addClass("open"); $(".modalOne").removeClass("open"); $(".modalTwo").removeClass("open"); }); $(document).on("click touchstart", function(e) { var container = $(".modal"); console.log() if (!$(e.target).hasClass("open") && !$(e.target).closest(".modal").hasClass("open") ) { container.removeClass("open"); } }); 

 * { box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; } html, body { margin: 0; padding: 0; } .container { width: 1170px; margin: 20px auto; } .box { float: left; width: 300px; height: 300px; margin: 0 10px; padding: 20px; position: relative; border-radius: 5px; background: #eee; } .btn { float: left; font-size: 14px; line-height: 18px; color: #fff; cursor: pointer; padding: 10px; position: relative; border: 0; border-radius: 5px; text-transform: uppercase; outline: 0; z-index: 2; background: #f00; } .modal { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; z-index: 1; background: rgba(0, 0, 0, 0.6); } .modal.open { opacity: 1; z-index: 3; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="container"> <div class="box"> <button type="button" class="btn btnOne">button</button> <div class="modal modalOne"> 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. </div> </div> <div class="box"> <button type="button" class="btn btnTwo">button</button> <div class="modal modalTwo"> <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</p> <h1>asas</h1> 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. </div> </div> <div class="box"> <button type="button" class="btn btnThree">button</button> <div class="modal modalThree"> 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. </div> </div> </div> 

请检查代码段代码

Answer 3

您要搜索的是来自jQuery的event.target 。 如果您侦听单击事件，则将始终获得整个“ html”节点。 但是，您可以获取eve.target对象直接单击的节点。

例：

 $( "body" ).click(function( event ) { $( "#log" ).html( "clicked: " + event.target.nodeName ); }); 

  span, strong, p { padding: 8px; display: block; border: 1px solid #999; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="log"></div> <div> <p> <strong><span>click</span></strong> </p> </div> 

您的情况是：

$('html').click(function (eve) {
  if(!eve.target.className.contains("open")){
    $(".modal").removeClass("open");
  }
});

我添加了if的节点，它检查单击的目标是否为开放模式（className.contains。（“ open”））。

这是完整的代码：

 $(window).on('load', function () { $(".btnOne").click(function (event) { event.stopPropagation(); $(".modalOne").addClass("open"); $(".modalTwo").removeClass("open"); $(".modalThree").removeClass("open"); }); $(".btnTwo").click(function (event) { event.stopPropagation(); $(".modalTwo").addClass("open"); $(".modalThree").removeClass("open"); $(".modalOne").removeClass("open"); }); $(".btnThree").click(function (event) { event.stopPropagation(); $(".modalThree").addClass("open"); $(".modalOne").removeClass("open"); $(".modalTwo").removeClass("open"); }); //Keep an eye on this part $('html').click(function (eve) { if(!eve.target.className.contains("open")){ $(".modal").removeClass("open"); } }); }); 

 * { box-sizing: border-box; -webkit-box-sizing: border-box; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; } html, body { margin: 0; padding: 0; } .container { width: 1170px; margin: 20px auto; } .box { float: left; width: 300px; height: 300px; margin: 0 10px; padding: 20px; position: relative; border-radius: 5px; background: #eee; } .btn { float: left; font-size: 14px; line-height: 18px; color: #fff; cursor: pointer; padding: 10px; position: relative; border: 0; border-radius: 5px; text-transform: uppercase; outline: 0; z-index: 2; background: #f00; } .modal { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; z-index: 1; background: rgba(0, 0, 0, 0.6); } .modal.open { opacity: 1; z-index: 3; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="box"> <button type="button" class="btn btnOne">button</button> <div class="modal modalOne"> 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. </div> </div> <div class="box"> <button type="button" class="btn btnTwo">button</button> <div class="modal modalTwo"> 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. </div> </div> <div class="box"> <button type="button" class="btn btnThree">button</button> <div class="modal modalThree"> 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. </div> </div> </div> 

另一个提示。 您有点滥用class属性。 您可能需要添加“ modalOne”，“ modalTwo”和“ modalThree”作为ID。

例如：

    <div class="modal" id="2">
        Lorem Ipsum is simply dummy text of the printing and 
    </div>

这样可以避免信息重复，也避免了CSS样式优先级的麻烦。

进一步阅读：

• https://api.jquery.com/event.target/

• https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className

• 重要提示： https : //developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/includes