web-dev-qa-db-ja.com

Twitterを設定する方法bootstrapモーダルをより広く、より高いですか？

Twitterを設定する方法bootstrapモーダルをより広く、より高いですか？

ここの例（クリックしてください：デモモーダルの起動）：

http://Twitter.github.com/bootstrap/javascript.html#modals

javascriptcsstwitter-bootstrapsizebootstrap-modal
37
mamasi

モーダルIDが「myModal」の場合

次のようなスタイルを追加してみてください。

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}
27
Mate

Bootstrap 3.1.1 では、modal-lgおよびmodal-smクラスが追加されました。 @mediaクエリを使用して、modalサイズを制御します。これは、modalサイズを制御するよりグローバルな方法です。

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
        height: 900px; /* control height here */
    }
}

サンプルコード：

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
54
Leniel Maccaferri

これを行う最も簡単な方法は、.modal-lgを使用することです。次のように、モーダルコンテナ内のmodal-dialogクラスに追加します。

<div class="modal fade">
    <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                I am now wider!
            </div>
    </div>
</div>
13
Vogon Jeltz

％のサイズの場合、これを行うことができます。

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}
10
c-toesca

クラスのモーダルダイアログを変更すると、私のためにトリックが行われました

.modal-dialog {
    width: 90%;
}
9
Wishper

Cssファイルで、新しいクラス定義を追加します。

.higherWider {
    width:970px;
    margin-top:-250px;
}

HTMLで、モーダルのクラス文字列内にhigherWiderを追加します。

<div class="modal hide fade higherWider">
5
Austin Mullins

受け入れられた答えはうまくいきますが、マージンではなくパディングを使用することをお勧めします。このようにして、モーダルダイアログの外側をクリックしたときに、閉じる機能を保持します。

#myModal {
    width: 700px; 
    padding-top: -300px !important;
    padding-left: -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}
4
A. Walker

css：

.modal-lg, .modal-sm {
    min-width: 90%;
}

コード：

<!-- The Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
2
Akın Köker

CSSを使用する場合：

.modal {
    width: 900px;
    margin-left: -450px; // half of the width
}
1
dfsq