如何關閉一個模式，如果你點擊覆蓋

我不明白爲什麼我的代碼不起作用，我會很感激，如果你幫助我，我需要當你點擊覆蓋或關閉按鈕時，覆蓋將關閉。如何關閉一個模式，如果你點擊覆蓋

<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

因此，它看起來像你的HTML您提供的不匹配的jQuery是尋找，.callPromo但也許這只是你激活你也沒有包括它？你還有兩個附加的點擊事件嵌套在你的初始點擊事件中。這不是必需的，可能是什麼導致你的問題。嘗試將所有三個點擊事件放在同一個範圍內。

來源

2016-10-19 09:38:21

如何關閉一個模式，如果你點擊覆蓋

回答

相關問題