Question

我正在尝试在模态上添加一个注册/输入字段，但每次我点击输入字段时它只是切换模态

$(document).ready(function(){
    $(".button a").click(function(){
        $(".overlay").fadeToggle(200);
       $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

http://codepen.io/kingatron/pen/qZLmjQ

如何修改jquery以便仍然可以使用输入字段？

Answer 1

单击叠加层时，请检查input作为目标。

$('.overlay').on('click', function(e){
  if(e.target.id != "mce-EMAIL") {
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
  } 
});

这将检查如果您在叠加层上的input内点击，则点击不会切换叠加层的动作。

请参阅此pen。

Answer 2

您的活动从您点击的元素一直冒出来，直到您点击的位置下方的元素的dom树。就这样

$('.overlay').on('click', function(){...});

处理程序正在触发，并关闭叠加层。

如果向函数定义添加参数，则可以检查事件的目标以识别单击的顶部元素。

$('.overlay').on('click', function(){
  // check el.target to identify the element clicked on
  // to determine whether the overlay should be shown

  // if the element isn't the overlay div
  if (el.target != this)
  {
    // exit and return false to prevent the event from bubbling
    return false;
  }

  // otherwise hide the overlay...
  $(".overlay").fadeToggle(200);   
  $(".button a").toggleClass('btn-open').toggleClass('btn-close');
  open = false;
});

Answer 3

我更改了$（＆＃34; .overlay＆＃34;）。fadeToggle（200）; to $（＆＃34; .button a＆＃34;）。fadeToggle（200）;然后在html中更改输入类型。感谢您抽出宝贵时间来查看我的问题

模态上的输入/注册字段不起作用

3 个答案: