web-dev-qa-db-ja.com

Twitter Bootstrapモーダルボックスのデフォルト幅を変更するにはどうすればよいですか？

私は以下を試しました：

   <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')

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

誰でも私を助けてもらえますか。他の誰かがこれを試してみました。やりたいことは珍しいことではないと思います。

javascriptjquerytwitter-bootstrap-2
370
user1321237

更新：

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を更新する。

369
Marco Johannesen

CSSだけで反応させたい場合は、次のようにします。

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

注1：私は.largeクラスを使用しました。通常の.modalでもこれを実行できます。

注2：ブートストラップ3では、マイナスの余白はもう必要ない場合があります。 （個人的に確認されていません） 

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

注3：Bootstrap 3および4にはmodal-lgクラスがあります。したがって、これで十分な場合がありますが、応答性を高めるには、Bootstrap 3用に提供した修正プログラムが必要です。

いくつかのアプリケーションではfixedモーダルが使用されます、その場合あなたはwidth:80%; left:10%;を試すことができます（式：left = 100 - width/2）

267
Nick N.

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

さまざまな幅を試してみるには、 this 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) */
    }
}
108
arcdegree

相対的なデザインを壊さないものが欲しいなら、これを試してください

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

@Marco Johannesenが言うように、セレクタの前の "body"は、デフォルトよりも高い優先順位を持つようになっています。

79
mlunoe

Bootstrap 3+では、モーダルダイアログのサイズを変更する最も適切な方法は、sizeプロパティを使用することです。以下は例です、modal-smクラスに沿ったmodal-dialogに注目してください。これは小さなモーダルを示します。これには、小さい場合はsm、中程度の場合はmd、大きい場合はlgの値を含めることができます。

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>
41
Tum

Bootstrap 3のためにここにそれを行う方法があります。

HTMLマークアップにmodal-wideスタイルを追加します（ から適応されているように - Bootstrap 3ドキュメントの例 ）

<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をオーバーライドする必要はありません。

34
Dave Sag

- Bootstrap 3 必要なのはこれだけです

<style>
    .modal .modal-dialog { width: 80%; }
</style>

上記の答えのほとんどは私のために働いていませんでした！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<style>
  #myModal1 .modal-dialog {
    width: 80%;
  }
  #myModal2 .modal-dialog {
    width: 50%;
  }
</style>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  80%
</button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  50%
</button>
<center>
  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 80%
        </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>
    </div>
  </div>


  <!-- Modal -->
  <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          custom width : 50%
        </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>
    </div>
  </div>

</center>
20
Alupotha

解決策は this pageからとられました

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});
17
Roman

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">
15
Dave

ブートストラップ3：スモールデバイスおよびエクストラスモールデバイスのレスポンシブ機能を維持するために、次のことを行いました。

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
13
user2823201

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

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>
7
Sreekanth Karini

これが私がしたことです、私のcustom.cssに私はこれらの行を追加しました、そしてそれはすべてでした。

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

明らかに、あなたは幅のサイズを変えることができます。

6
clarenswd

私はこの解決策を見つけました。これを使うことができます：

$('.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

6
PedroSaiz

FYIブートストラップ3は自動的に左のプロパティを処理します。したがって、このCSSを追加するだけで幅が変更され、中央に配置されます。

.modal .modal-dialog { width: 800px; }
5
Gavin

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

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

複雑にしないでおく。

4
obfk

クラスmodel-dialogを変更すると期待通りの結果が得られます。これらの小さなトリックは私のために働きます。この問題を解決するのに役立つことを願っています。

.modal-dialog {
    width: 70%;
}
4
Faisal

Bootstrap 3 CSSでは、単純に次のように使用できます。

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

シェーディングにも適用される.modal-dialogの代わりに.modalを使用しているので、これはあなたがページのデザインを壊さないようにします。

3
saadel

Bootstrap 3では、必要なのはCSSを通してモーダルダイアログに与えられるパーセント値だけです。

CSS

#alertModal .modal-dialog{
     width: 20%;
}
3
Nav

このページのヒントとともに、CSSとjQueryの組み合わせを使用して、Bootstrap 3を使用して滑らかな幅と高さを作成しました。

まず、コンテンツ領域の幅とオプションのスクロールバーを処理するCSS

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

その後、必要に応じてコンテンツ領域の高さを調整するためのいくつかのjQuery

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/ /に完全な記述とコード

3
Scott Dawson

モーダルをレスポンシブにするためにパーセンテージを使用するのではなく、すでにブートストラップに組み込まれている列やその他のレスポンシブ要素を使用することでより多くの制御が得られる可能性があります。

モーダル応答性を向上させるには/任意の数の列のサイズ：

1）クラス.containerを持つモーダルダイアログdivの周りに余分なdivを追加します - 

<div class="container">
    <div class="modal-dialog">
    </div>
</div>


2）モーダルを全幅にするために小さなCSSを追加します - 

.modal-dialog {
    width: 100% }


3）その他の様式がある場合は、代わりに追加のクラスを追加します - 

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }


4）さまざまなサイズのモーダルが欲しい場合は、行/列を追加してください - 

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>
2
Alex

あなたのcssファイルに以下を追加してください

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }
2
kismet

スクリプトの下に使用：

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

デモ ：

Demo on gif

2
Janusz Ładecki

次のような方法を試してください（ここでライブ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…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​
2
periklis

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

.modal-dialog {
    width: 41% !important;
}
1
Aamir

Bootstrap 4.1で解決しました

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

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

私はSCSSと完全に反応の良いモーダルを使いました。

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
}
0
Rodolfo Jorge Nemer Nogueira

私はこのように使用しました、そしてそれは私にとって完璧な仕事です

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});
0
Belal mazlom

以下はJavaScriptを介して画面からモーダルポップアップの幅と左の位置を設定するためのコードです。

$（ '＃openModalPopupId'）。css（{"width"： "80％"、 "left"： "30％"}）;

0
Sheo Dayal Singh

Bootstrap 2のためのより少ないベースのソリューション（no 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);
}
0
sinelaw
you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

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

または

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

sample:
 using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large)))
                {
}
0
Noble Jacob

ブートストラップ3.x.x 

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

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

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

        </form>

    </div>
</div>

2番目のdivに.employeeModalクラスを追加したことに注意してください。それからそのクラスをスタイルします。

.employeeModal{
        width: 700px;
    }

screenshot of code snippet

0
Neutral