Bootstrap 4模态框内X-Editable弹窗文本框无法点击的问题

我之前也碰到过一模一样的坑！你猜的没错，核心原因就是z-index层级冲突——Bootstrap 4的模态框默认z-index是1050，而XEditable弹窗的默认层级比这个低，导致弹窗看起来显示出来了，但实际上被模态框的遮罩或者内容层挡住了，所以点击事件根本传不到输入框上。

给你几个亲测有效的解决办法：

• 调整XEditable弹窗的z-index（最推荐）
  直接写自定义CSS，把XEditable弹窗的层级设得比Bootstrap模态框高：

  .editable-popup {
    z-index: 1060 !important; /* 比模态框默认的1050高就行 */
  }
  

  这个方法最简单，不会影响其他功能，一般加完就能正常点击输入框了。

• 修改模态框的overflow属性
  有时候模态框的overflow: auto会把超出范围的弹窗截断，导致点击区域被屏蔽。可以试试给模态框内容容器加overflow: visible：

  .modal-content {
    overflow: visible !important;
  }
  

  注意：如果你的模态框内容很长，这个设置可能会让模态框失去滚动功能，所以需要根据实际情况权衡。

• 将XEditable弹窗挂载到模态框内部
  初始化XEditable时，指定弹窗挂载到模态框的内容区域，这样弹窗的层级会继承模态框，自然不会被挡住：

  $('.editable').editable({
    mode: 'popup',
    appendTo: '.modal-body' // 替换成你模态框内容对应的选择器
  });
  

先试试第一种方法，大概率能解决问题。如果还是不行，再尝试后面两种方案。

内容的提问来源于stack exchange，提问作者Robert Benedetto