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

Input/ signup field on modal not working

本文关键字：注册 字段 不起作用 输入 模态      更新时间：2023-09-26

我正试图在模态上添加一个注册/输入字段，但每次我点击输入字段时，它都会关闭模态

$(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以便仍然可以使用输入字段？

单击覆盖时，请检查是否将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内部单击，则不会发生不切换覆盖的单击操作。

请参阅这支钢笔。

您的事件从您单击的元素开始，一直到您单击的位置下方的元素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;
});

我更改了$（".overlay"）.fadeTogle（200）；至$（".button a"）.fadeToggle（200）；然后更改html中的输入类型。感谢您花时间查看我关于的问题

相关文章：