373

私は次のことを試しました：

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

そして、このJavascript：

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

結果は私が期待したものではありません。モーダルの左上が画面の中央に配置されます。

誰でも私を助けることができますか？他の誰かがこれを試しましたか。やりたいと思うのは珍しいことではないと思います。

4

32 に答える 32

373

アップデート：

bootstrap 3モーダルダイアログを変更する必要があります。したがって、この場合、立っmodal-adminている場所にクラスを追加できます。modal-dialog

元の回答 (ブートストラップ < 3)

JS/jQuery で変更しようとしている特定の理由はありますか?

CSS だけで簡単に行うことができます。つまり、ドキュメントでスタイル設定を行う必要はありません。独自のカスタム CSS ファイルに、次を追加します。

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

あなたの場合：

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

セレクターの前に body を置く理由は、デフォルトよりも優先度が高くなるようにするためです。このようにして、それをカスタム CSS ファイルに追加し、心配することなく Bootstrap を更新できます。

于 2012-04-16T06:27:54.653 に答える
107

Bootstrap 3を使用している場合は、受け入れられた回答に示されているようなモーダルdivではなく、モーダルダイアログdivを変更する必要があります。また、Bootstrap 3 のレスポンシブな性質を維持するには、メディア クエリを使用してオーバーライド CSS を記述し、モーダルが小さいデバイスで全幅になるようにすることが重要です。

さまざまな幅を試すには、この JSFiddleを参照してください。

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}
于 2013-08-01T17:02:50.553 に答える
80

相対的なデザインを壊さないものが必要な場合は、これを試してください。

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

@Marco Johannesenが言うように、セレクターの前の「本体」は、デフォルトよりも高い優先順位をとるようになっています。

于 2012-05-09T09:49:46.583 に答える
34

方法は次のとおりBootstrap 3です。

modal-wideHTML マークアップにスタイルを追加します ( Bootstrap 3 docs の例から適応) 。

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

次のCSSを追加します

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

これを中央に配置するためにオーバーライドする必要はありませんmargin-left。Bootstrap 3

于 2013-09-04T01:00:16.763 に答える
17

解決策はこのページから取得されました

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});
于 2012-07-05T11:03:22.160 に答える
15

Bootstrap の v3 には、モーダルを大きくする簡単な方法があります。modal-dialog の横にクラスmodal-lgを追加するだけです。

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">
于 2016-08-23T07:11:20.893 に答える
13

Bootstrap 3: 小型および超小型デバイスのレスポンシブ機能を維持するために、次のことを行いました。

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
于 2013-09-27T11:37:58.800 に答える
7

Bootstrap>3 の場合、モーダルにスタイルを追加するだけです。

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>
于 2016-06-13T05:43:06.763 に答える
7

これが私がしたことです。私のcustom.cssにこれらの行を追加しました。それだけです。

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

もちろん、幅のサイズを変更できます。

于 2014-06-22T14:09:55.873 に答える
6

私にとってより効果的なこのソリューションを見つけました。これを使用できます：

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

またはこれはあなたの要件に応じて：

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

私が見つけた投稿を参照してください: https://github.com/twitter/bootstrap/issues/675

于 2013-02-08T01:56:04.463 に答える
5

参考までに、Bootstrap 3 は left プロパティを自動的に処理します。したがって、この CSS を追加するだけで幅が変更され、中央に維持されます。

.modal .modal-dialog { width: 800px; }
于 2013-09-09T08:15:37.083 に答える
4

レスポンシブデザインを維持し、幅を希望に合わせて設定します。

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

複雑にしないでおく。

于 2014-02-19T13:09:13.853 に答える
3

Bootstrap 3 では、CSS を介してモーダル ダイアログにパーセンテージ値を指定するだけで済みます。

CSS

#alertModal .modal-dialog{
     width: 20%;
}
于 2013-11-01T05:03:33.917 に答える
3

CSS を使用したBootstrap 3では、以下を簡単に使用できます。

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

これにより、シェーディングにも適用される.modal-dialog代わりにwhichを使用しているため、ページのデザインが崩れることはありません。.modal

于 2015-07-09T18:28:16.773 に答える
2

次のようなことを試してください (ライブの jsfiddle の例をここで参照してください: http://jsfiddle.net/periklis/hEThw/1/ )

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​
于 2012-04-16T06:22:20.380 に答える
2

Bootstrap 4.1で解決しました

以前に投稿されたソリューションの組み合わせ

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}

于 2018-10-10T20:18:59.933 に答える
1

を使用して期待される結果を達成し、

.modal-dialog {
    width: 41% !important;
}
于 2016-08-05T14:16:00.900 に答える
0

Bootstrap 2 のベースの少ないソリューション (js なし):

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

次に、モーダル幅を指定する場所:

#myModal {
    .modal-width(700px);
}
于 2013-11-25T23:41:09.890 に答える