ブートストラップモーダル内に簡単なスライドショーをまとめようとしています。画像の遷移には Cycle2 を使用しています。これは、モバイル デバイスを含む chrome と safari で美しく機能しています。問題は、Firefox と IE のモーダル ウィンドウのサイズに画像が制限されていないことです。画像だけの場合は機能しますが、画像を div レイヤーにテキスト コンテンツでラップすると爆発します。画像だけを表示する 2 つのフィドルと、コンテンツを含む 2 つ目のフィドルがあります。
画像のみ: http://jsfiddle.net/GswZ2/1/ (すべてのブラウザーで動作)
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div class="cycle-slideshow">
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/02/kate-upton-2013.jpg" />
<img src="http://content.clearchannel.com/cc-common/mlib/790/03/790_1364298792.jpg" />
<img src="http://de.wallpapersus.com/wallpapers/2012/07/Kate-Upton-Lingerie-2-1050x1680.jpg" />
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
コンテンツと画像: http://jsfiddle.net/aFmS9/4/ (IE と FF では動作しません)
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div class="cycle-slideshow" data-slides="> div">
<div>
<img src="http://www.hdwallpapersfan.com/wp-content/uploads/2013/02/kate-upton-2013.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
</div>
<div>
<img src="http://content.clearchannel.com/cc-common/mlib/790/03/790_1364298792.jpg" />
<p>ALorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
</div>
<div>
<img src="http://de.wallpapersus.com/wallpapers/2012/07/Kate-Upton-Lingerie-2-1050x1680.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna nunc, euismod luctus fermentum at, pulvinar vitae odio. Pellentesque in aliquet leo. Vivamus placerat quam ac leo ornare interdum.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
助けてくれてありがとう！