title: Bootstrap modal dialog tabindex="-1" not accessable form elements
body: <p>I have a bootstrap modal dialog and this modal dialog have a tabindex="-1" attribute and in this modal form elements working properly..
  I'm call a fixed other div with have form elements. But this form elements cannot accessable. The cursor looks normal when the form elements hover over them. But when I click it doesn't focus.</p>
  
  <p>If I remove tab index = "-1", it's okay. But I need the tabindex = "-1" attribute.</p>
  
  <p>Following html bootstrap modal dialog..</p>
  
  <pre><code>    &lt;div class="modal fade" role="dialog" tabindex="-1" data-bind="modal:$parent.Edit"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Ekle/Düzenle&lt;/h4&gt;
  
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="inner-padding"&gt;
                          @Html.Partial("FieldItem")
                          &lt;!--Some form elements for modal dialog this form elements working properly--&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" style="float:none;" data-dismiss="modal"&gt;Kapat&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And following html called div with form elements. Not in bootstrap modal dialog and not accessable</p>
  
  <pre><code>&lt;div id="value-popup" role="dialog" onclick="event.stopPropagation()"  style="width:300px;padding:15px;z-index:99999;position:fixed;left:0px;top:0px;background-color:white; border-radius:5px;border:1px solid #808080" data-bind="visible:Show, style:{left:PanelPos().x + 'px',top:PanelPos().y + 'px'}"&gt;
  
      &lt;div class="form-group" style="padding:15px;"&gt;
          &lt;label class="control-label"&gt;Ara&lt;/label&gt;
          &lt;input  type="text" placeholder="Ara" data-bind="textInput:Keyword,hasFocus:SearchFocus" class="form-control value-helper-search"  onclick="event.stopPropagation()" /&gt;
      &lt;/div&gt;
      &lt;select size="20" class="form-control" data-bind="foreach:Result,value:SelectedItem" onclick="event.stopPropagation()" &gt;
          &lt;optgroup label="x" data-bind="attr:{label:Name},foreach:FilteredItems"&gt;
              &lt;option data-bind="value:$data, text: Name"&gt;&lt;/option&gt;
          &lt;/optgroup&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>