2017-06-30 2 views
0

これは私の問題です。私は(ツールチップ)がモーダルの内側にあるツールチップの中にイメージを表示しています。イメージの高さと幅がモーダルの高さと幅に一致すると、すべてが問題なくうまくなります。モーダルより大きいツールチップの中に画像がある場合、残りの部分は表示されません(おそらく、モーダル内に詰まっている)が、画像のほんの一部が表示されます。Bootstrapモーダル内のツールチップ内にフルイメージを表示

私は、ツールチップのホバー上に一時的なdivが作成されていることに気付きました。そのCSSをクラス別にターゲット設定しようとしましたが、position:absolute; top;0; z-index: 99999;を無駄に(!importantの有無にかかわらず、何もしなかったので)。

問題はon CodePenです。

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<button class="btn btn-sm btn-info btnclick">Click me!</button> 

<div id="myModal" class="modal fade" tabindex="-1" data-focus-on="input:first"><div class="modal-body"> 
    <h4 class="text-center">Some title</h4> 
    <hr> 
    <div class="col-md-12 initial"> 
     <div class="form-group initial"> 
     <strong>A tooltip<sup class="icon-question tooltips" data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="<img width='800' src='http://i.imgur.com/fsFheFJ.jpg'>">**</sup>, another one<sup class="icon-question tooltips" data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="<img width='128' src='http://i.imgur.com/fsFheFJ.jpg'>">**</sup></strong> 
     </div> 
    </div> 
    </div> 
</div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

CSS

.btnclick { 
    position: absolute; 
    top: 5%; 
    left: 2%; 
} 

#myModal { 
    width: 60%; 
    height: 30%; 
    position: absolute; 
    left:20%; 
    top: 15%; 
    background-color: #fff; 
} 

sup { 
    color: red; 
} 

はJavaScript

$('.btnclick').on('click', function() { 
    $('#myModal').modal('show'); 
    $('.tooltips').tooltip(); 
}); 

答えて

1

を追加します。 0から#myModalに変更すると、画像全体が表示されるようになります。コードパッドでテストしました。今すぐブートストラップは、自動的に.modalをoverflow:hiddenに設定します。

+0

これは、トリックでした。 #myModalの代わりに、私は一時的な部門を狙っていた。 – FiddlingAway

関連する問題