Question

我有一个聊天，它有一个用于打字的textarea部分。效果很好。

我打开一个模态，由于z-index，textarea仍然保持在上面。但是当我用鼠标点击它时它不会聚焦。看起来已经被禁用了。

如果我打开模态后打开聊天，它也不起作用。

有什么想法吗？

聊天窗口具有绝对定位。

Answer 1

由于某些我不知道的原因，Boostrap不允许这样做。

我使用Bulma（一个纯粹的CSS lib）做了一些这样的想法：

<div class="container" id="app">
  <div class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
      <!-- Any other Bulma elements you want -->
      <table>
        <tr>
          <td>Jhon</td>
          <td>Hi</td>
        </tr>
      </table>
      <input type="text" class="input" />
    </div>
    <button class="modal-close"></button>
  </div>
  <textarea style="position:absolute;z-index: 9999" name="" id="" cols="30" rows="2"></textarea>
  <br /><br /><br />
  <p>
    <button class="button" id="showModal">Show</button>
  </p>
</div>

OBS： Bulma没有JavaScript代码，您应该自己转换类。

JavaScript：

$("#showModal").click(function() {
  $(".modal").addClass("is-active");  
});

$(".modal-close").click(function() {
   $(".modal").removeClass("is-active");
});

http://codepen.io/edgardleal/pen/GWWKoO?editors=1010

Texstrea上面的bootstrap模态并没有得到关注

1 个答案: