0
左側に表示されるモーダル内にカスタムドロップダウンがあります。モーダルオーバーフローscroll.The内容ではなく、モーダルの飛び出るの、モーダル下回る持つように、入力がモーダルにスクロール可能なコンテンツがある場合に、カスタムドロップダウンメニューがモーダル外に表示されない
をクリックしたときに
マイカスタムドロップダウンがトリガされます。
私はフィディルドにselect2サンプルを追加しました。私はモーダルの右側にそれを追加しました。ここでselect2ドロップダウンはモーダルから飛び出しているオプションを示しています。
私はフィドルexample
NOTEを作成しました：私は、サードパーティ製のプラグインをお勧めしません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>
[How To Ask]（https://stackoverflow.com/help/how-to-ask）に慣れてください。あなたの質問には質問は含まれておらず、質問自体には最小で完全で検証可能な例*は含まれていません。JSFiddleリンクは補足として役立ちますが、質問は外部リソースに依存することなく完全に独立して立つことができるはずです。 – Santi
@サンティ私は自分の質問を少し改善しました。実際の例がうまく説明できるので、私はフィドルを追加しました。 – zerocon
さて、閉会投票を削除しました。つまり、StackOverflowにはスニペットボタンがあり、JSFiddleのように実行可能なスニペットをあなたの質問に埋め込むことができ、[MCVE Requirement]（https://stackoverflow.com/help/mcve）を満たしているので、あなたの質問はそうではありませんリスクの閉鎖。ボタンは次のようになります： '[<>]'。スニペットとして実行するようにあなたの質問を編集します - これは非常に便利なツールです。 – Santi