当模态具有可滚动内容时，自定义下拉菜单在模态外部不可见

Question

• 我在左侧显示的模态中有自定义下拉列表。

• 单击输入时会触发我的自定义下拉列表

• 由于模态有溢出滚动。内容低于模态，而不是弹出模态。

• 我在小提琴中添加了一个select2示例。我已将其添加到模态的右侧。这里，select2下拉列表显示弹出模态的选项。

我创建了一个小提琴example

注意：我正在为我的应用开发一个小插件，该插件使用自定义下拉菜单，如小提示中所示。所以不建议使用第三方插件。

＆＃13;

＆＃13;

$(function() {
  $('select').select2();
  $('#name').on('click', function() {
    $('.dropdown').show();
  });

  $('#name').on('blur', function() {
    $('.dropdown').hide();
  });
});

＆＃13;

.modal-body {
  height: 250px;
  overflow-y: auto;
}

.wrapper {
  position: relative;
}

.dropdown {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  position: absolute;
  display: none;
  z-index: 2000px;
}

.dropdown li {
  list-style: none;
}

.select2 {
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <div class="wrapper">
          <input type="text" id="name" />
          <ul class="dropdown">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
            <li>f</li>
            <li>g</li>
            <li>h</li>
            <li>i</li>
            <li>j</li>
            <li>k</li>
            <li>l</li>
            <li>m</li>
          </ul>
        </div>
        <select>
               <option>a</option>
               <option>b</option>
               <option>c</option>
               <option>d</option>
               <option>e</option>
               <option>f</option>
               <option>g</option>
               <option>h</option>
               <option>i</option>
               <option>j</option>
             </select>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;