引導模態上方的Textarea無法獲得焦點

Question

我有一個聊天，其中有一個用於輸入的textarea部分。 效果不錯。

我打開一個模式，由於z-index，textarea仍保留在上方。 但是，當我用鼠標單擊時，它沒有聚焦。 似乎已被禁用。

如果我在打開模態后打開聊天室，那也不起作用。

有任何想法嗎？

聊天窗口具有絕對定位。

Answer 1

由於某些我不知道的原因，Boostrap不允許這樣做。

我使用布爾瑪（純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