오버레이를 클릭하면 모달을 닫는 방법

내 코드가 작동하지 않는 이유를 알아낼 수 없으며, 도와 주시면 감사하겠습니다. 오버레이 또는 닫기 버튼을 클릭하거나 오버레이를 닫을 때 필요합니다. .오버레이를 클릭하면 모달을 닫는 방법

<div class="callback-form promo"> 
      <form name='promoform' id="promoform"> 
       <span class="close-btn close">&#10006;</span> 
       <input type="text" name="name" placeholder="Имя" maxlength="30"> 
       <input type="tel" name="phone" placeholder="Телефон" maxlength="20"> 
       <input class="callback-submit" type="submit" value="Отправить" name="save" id="sendPromo" disabled> 
      </form> 
     </div>

JS :

$(".callPromo").click(function() { 
     $(".callback-form.promo").css("display", "block"); 
     $(".close").click(function() { 
      $(".callback-form.promo").css("display", "none"); 
     }); 
     $(".callback-form.promo").on("click", function(e) { 
      var clicked = $(e.target); 
      var x = $(".callback-form.promo #promoform"); 
      console.log(clicked); 
      if (clicked != x) { 
       $(".callback-form.promo").css("display", "none"); 
      } 
     }); 
    });

출처

2016-10-19 Dima Vleskov

당신은 함께 작업 예를 넣어 주시겠습니까? ** 그리고 ** 당신이 가지고있는 문제는 * 잘 작동하지 않기 때문에 * 매우 설명 적이 지 않다;) –

.close 클릭 이벤트와 callback-form.promo 발사가 동시에 발생합니다. 다른 발화에는 stopPropagation()을 사용하십시오.

다음을 시도해보십시오.

$(".callPromo").click(function() { 
 
     $(".callback-form.promo").css("display", "block"); 
 
}); 
 
$(".close").click(function(e) { 
 
    $(".callback-form.promo").css("display", "none"); 
 
    e.stopPropagation(); 
 
}); 
 
$("#promoform input").on("click", function(e) { 
 
    e.stopPropagation(); 
 
}) 
 
$(".callback-form.promo").on("click", function(e) { 
 
    e.stopPropagation(); 
 
    var clicked = $(e.target); 
 
    var x = $(".callback-form.promo #promoform"); 
 
    console.log(clicked) 
 
    if (clicked != x) { 
 
    $(".callback-form.promo").css("display", "none"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="callback-form promo" style="background:red;width:300px;height:300px"> 
 
      <form name='promoform' id="promoform"> 
 
       <span class="close-btn close">&#10006;</span> 
 
       <input type="text" name="name" placeholder="Имя" maxlength="30"> 
 
       <input type="tel" name="phone" placeholder="Телефон" maxlength="20"> 
 
       <input class="callback-submit" type="submit" value="Отправить" name="save" id="sendPromo" disabled> 
 
      </form> 
 
     </div>

출처

2016-10-19 09:40:14

은 그래서 당신이 jQuery를이 .callPromo, 무엇을 찾고 일치하지 않습니다했지만 아마이 당신의 활성화이며했습니다 아닌 HTML처럼 보인다 포함 시켰습니까? 또한 초기 클릭 이벤트에 중첩 된 두 개의 추가 클릭 이벤트가 있습니다. 이것은 반드시 필요한 것은 아니며 문제의 원인이 될 수 있습니다. 세 가지 클릭 이벤트를 모두 동일한 범위에 넣어보세요.

출처

2016-10-19 09:38:21

오버레이를 클릭하면 모달을 닫는 방법

답변

관련 문제