1

次のように、モーダルの隅から閉じるボタンを「ハング」させようとしています: http://i.imgur.com/3rminEM.png

コーナーの画像を表示しようとしました display:inline;float:right; いくつかの相対的な位置付けですが、モーダルの内部領域の外には何も表示されません (モーダルは、スクロール時に画像を表示するスクロールバーを取得する場合があります)。z-index も増やしてみましたが、役に立ちませんでした。

これを行う方法はありますか？おそらくモーダル自体の背景画像でしょうか？代替モーダル? 私は gwt-bootstrap で GWT を使用しているので、css のみの解決策があることを願っています。

4

3 に答える 3

2

モーダル ヘッダーの HTML マークアップは次のとおりです。

<div class="modal-header">
    <button type="button" class="close mynewclassclose" data-dismiss="modal" aria-hidden="true">
       <img src="http://expediaholiday.d.seven2.net/_images/modal_close.png"/>
    </button>
    <h3 id="myModalLabel">Modal Heading</h3>    
</div>/

.mynewclasscloseこのボタンのデフォルトの Twitter Bootstrap 設定を上書きするためだけに、いくつかの新しい class を追加しました。そして、閉じるボタンの画像を追加しました。（代わりに背景画像を使用できますが、これは問題ではありません。ただし、その場合、CSS で幅と高さを定義する必要があります）。

ここにCSSがあります

.modal-header {
    position: relative;
}

.mynewclassclose {
    position: absolute;
    margin: 0;
    top: -23px; /* half height of "X" image, just for nice placing*/
    right: -23px; /* half width of "X" image, just for nice placing*/
    opacity: 0.9;
}

.mynewclassclose:hover {
    opacity: 1;
}

そして、ここに動作するデモがあります: http://jsfiddle.net/Aqydb/1/

于 2013-04-13T01:09:06.550 に答える
0

あなたは、インラインおよび相対ポジショニングを試したと言いました。絶対に配置しようとしましたか？上: 0; 右: 0; 試してみた場合は、コードの一部または実際の例を投稿してもよろしいですか?

于 2013-04-12T17:48:02.133 に答える