Select2不使用模态

Question

我无法使用select2来处理我的wrapbootstrap（Inspinia）主题。

这些选项显示在我的模态“下方”，使其无法选择（请参见下面的屏幕截图）。我认为Select2会创建一堆阻碍它的包装器。我该如何解决？当我检查元素时，这就是我所看到的：

<div class="form-group">
  <label>Variant SKU</label>
  <select name="variant_sku_id" id="variant_sku_id" class="variant_sku_id form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    <option value="1">option1</option>
    <option value="2">option2</option>
  </select>
  <span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100px;">
  <span class="selection">
  <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-variant_sku_id-container" aria-owns="select2-variant_sku_id-results" aria-activedescendant="select2-variant_sku_id-result-3g9n-1">
  <span class="select2-selection__rendered" id="select2-variant_sku_id-container" title="option1"</span>
  <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
  </span>
  </span>
  <span class="dropdown-wrapper" aria-hidden="true"></span>
  </span> 
</div>

Answer 1

通过在初始化select2时添加此选项来修复：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="150" style="display: block; overflow: hidden; vertical-align: middle;">
    <div style="position: relative;">
      <video autoplay loop width="100%" style="display: block;">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      </video>
    </div>
    </td>
  </tr>
</table>

Answer 2

您可以更改select2的z-index。这应该也有效：

.select2 { z-index: 99999999; }

Answer 3

也许这会让你感兴趣：

  

请添加其他样式以改善select2的z-index   容器：

.select2-container {
   z-index: 2050;
} 

     

接下来初始化脚本中的Select2

$(".select2_demo_2").select2({
   width: '100%'
});

找到http://webapplayers.com/inspinia_admin-v2.4/modal_select2.html

祝你好运