0
我在左側顯示的模態內有一個自定義下拉菜單。輸入點擊當模態具有可滾動內容時，自定義下拉菜單在模態外不可見
由於模式具有溢出scroll.The內容那張模式之下時，而不是突然跳出模式的
我的自定義下拉被觸發。
我在小提琴中添加了select2示例。我已將它添加到模態的右側。在此，select2下拉菜單顯示了彈出模態的選項。
我創建了一個小提琴example
注：我開發我的應用小插件，使用自定義下拉如圖所示fiddle.So不建議第三方插件。
$(function() {
$('select').select2();
$('#name').on('click', function() {
$('.dropdown').show();
});
$('#name').on('blur', function() {
$('.dropdown').hide();
});
});.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;
}<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>
請熟悉[如何提問]（https://stackoverflow.com/help/how-to-ask）。你的問題在問題本身中不包含問題，也不包含最小，完整，可驗證的例子*。JSFiddle鏈接作爲補充是有用的，但是這個問題應該能夠完全獨立於自己而不依賴於外部資源。 – Santi
@Santi我已經更新了我的問題。我已經添加了小提琴，因爲一個工作示例會更好地解釋。 – zerocon
幹得好，我已經取消了我的封閉投票。話雖如此，StackOverflow有一個Snippet按鈕，它允許您像JSFiddle一樣將可運行代碼片段嵌入到您的問題中，並滿足[MCVE要求]（https://stackoverflow.com/help/mcve），因此您的問題不會風險關閉。按鈕看起來像這樣：'[<>]'。我將編輯你的問題作爲一個片段運行 - 向前推進它是一個非常有用的工具，讓你熟悉！ – Santi