Como posso alterar a largura padrão de uma caixa modal do Twitter Bootstrap?


373

Eu tentei o seguinte:

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

E este Javascript:

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

O resultado não é o que eu esperava. O canto superior esquerdo modal está posicionado no centro da tela.

Alguém pode me ajudar. Alguém mais tentou isso. Presumo que não seja algo incomum querer fazer.


O plug-in Bootstrap não possui muitas opções. tente localizar a classe no arquivo CSS de autoinicialização e veja se ela está configurada via CSS, então você poderá sobrescrever ou, pelo menos, terá uma idéia melhor sobre qual elemento ele é.
GillesC

3
Veja a resposta de Nick N para obter uma resposta responsiva muito boa! stackoverflow.com/a/16090509/539484
OnTheFly

Respostas:


373

ATUALIZAR:

Em bootstrap 3você precisa alterar a caixa de diálogo modal. Portanto, neste caso, você pode adicionar a classe modal-adminno local em que modal-dialogestá.

Resposta original (Bootstrap <3)

Existe algum motivo para você tentar alterá-lo com JS / jQuery?

Você pode fazer isso facilmente apenas com CSS, o que significa que não precisa fazer o estilo no documento. No seu próprio arquivo CSS personalizado, você adiciona:

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

No seu caso:

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

A razão pela qual eu coloquei body antes do seletor é para que ele tenha uma prioridade mais alta que o padrão. Dessa forma, você pode adicioná-lo a um arquivo CSS personalizado e, sem preocupações, atualizar o Bootstrap.


2
Role abaixo para obter uma resposta melhor (responsiva) graças a @NickN!
OnTheFly

11
@FloatingRock você pode torná-lo responsivo, olhe para a minha resposta #
Nick N.

11
@NickN. Assassino! Obrigado Nick
FloatingRock

47
O Bootstrap 3 facilita isso. .modal .modal-dialog { width: 800px; }A posição esquerda é calculada automaticamente.
Gavin

11
Na verdade, isso não funciona para mim. A solução comentada por @ZimSystem fez o truque.
tonjo 23/03

270

Se você deseja torná-lo responsivo apenas com CSS, use o seguinte:

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

Nota 1: usei uma .largeclasse, você também pode fazer isso normalmente.modal

Nota 2: No Bootstrap 3, a margem esquerda esquerda pode não ser mais necessária (não confirmada pessoalmente)

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

Nota 3: No Bootstrap 3 e 4, há uma modal-lgclasse. Portanto, isso pode ser suficiente, mas se você quiser torná-lo responsivo, ainda precisará da correção que forneci para o Bootstrap 3.

Em algumas aplicações, os fixedmodais são usados; nesse caso, você pode tentar width:80%; left:10%;(fórmula: esquerda = 100 - largura / 2)


Isso parece fazer com que o modal fique metade da tela em telas muito estreitas.
COFIEM

5
Cofiem, use uma consulta de mídia para corrigir isso #
Nick N.

11
@NickN. minha consulta de mídia não a corrigiu. Você pode adicionar um exemplo? Desrespeito, eu entendi. Eu tinha largura máxima em vez de largura mínima. @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
HPWD

Acho que usar apenas% não dá controle suficiente, como faria com as colunas já incorporadas no bootstrap.
Alex

@ Alex Eu acho que lhe dá mais controle, como você faria isso com as colunas existentes?
N.

107

Se você estiver usando o Bootstrap 3, precisará alterar a div de diálogo modal e não a div modal, como é mostrado na resposta aceita. Além disso, para manter a natureza responsiva do Bootstrap 3, é importante escrever o CSS de substituição usando uma consulta de mídia para que o modal tenha largura total em dispositivos menores.

Veja este JSFiddle para experimentar diferentes larguras.

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) */
    }
}

3
corrija o bootstrap3. funciona sem adaptar margem! thx
SQueek

11
Eu removi o atributo id na resposta porque não é necessário.
arcdegree

funciona, mas não responde como mlunoe ou Dave responde.
ksiomelo

80

Se você deseja algo que não quebre o design relativo, tente o seguinte:

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

Como @marco Johannesen diz, o "corpo" antes do seletor é para que ele tenha uma prioridade mais alta que o padrão.


4
eu recomendo apenas usando margin-left:auto; margin-right:auto;em vez de autotoda a volta
cwd

em alguns casos, pode ser necessário top: 30%, a porcentagem dependendo do conteúdo interno.
bool.dev

6
Isso funciona bem para mim quando omito a regra .modal.fade.in, que move o modal até o final no Bootstrap V2.2.2.
Ramiro # 6/13

11
Isso funcionou com o exemplo modal da ANGULAR-UI ... Basta soltar o código em um arquivo css e carregar na página ... angular-ui.github.io/bootstrap/#/modal ... Exemplo de execução em plnkr.co / edit / GYmc9s? p = preview
Marcello de Sales

11
ótimo esta solução funciona bem no bootstrap 2.3.2 e PRINCIPAL no internet explorer 8,9,10 !!!! solução com margem esquerda: -40% está incorreta no internet explorer !!!
precisa saber é o seguinte

41

No Bootstrap 3+, a maneira mais apropriada de alterar o tamanho de uma caixa de diálogo modal é usar a propriedade size. Abaixo está um exemplo, observe modal-sma modal-dialogclasse, indicando um pequeno modal. Pode conter os valores smpara pequeno, mdmédio e lggrande.

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

Adicionei-o à minha resposta :)
Tum

3
Esta não deveria ser a melhor resposta? Suponho que a resposta principal possa ajudá-lo a personalizá-lo, mas a maioria dos casos de uso deve ser satisfeita pelas classes incorporadas do Bootstrap.
WebSpanner 9/02

Estou usando o Bootstrap 3.xe não pareço ter modal-mdaula.
James Poulose

34

Pois Bootstrap 3aqui está como fazê-lo.

Adicione um modal-wideestilo à sua marcação HTML (conforme adaptado do exemplo nos documentos do 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 -->

e adicione o seguinte CSS

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

Não há necessidade de substituir margin-lefta Bootstrap 3de conseguir este ser centrado agora.


3
Apenas para evitar qualquer confusão, não há razão técnica para adicionar a modal-wideclasse, o que significa que não é uma classe "interna" do Bootstrap. Você pode simplesmente fazer#myModal .modal-dialog { width: 80%; }
Gavin

11
Sim. Mas fazê-lo como um estilo o torna mais reutilizável.
quer

2
Sim eu entendo. Muitas vezes é difícil fazer a diferença entre uma classe de autoinicialização e uma classe personalizada, então eu queria anotar isso.
Gavin

20

No Bootstrap 3, tudo o que você precisa é este

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

A maioria das respostas acima não funcionou para mim !!!


Você sabe como alterar a altura modal? Obrigado pela sua resposta, ele funciona como um encanto :)
FrenkyB

17

A solução foi retirada desta página

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

15

Na v3 do Bootstrap, existe um método simples para aumentar um modal. Basta adicionar a classe modal-lg ao lado de modal-dialog.

<!-- 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">

Por que o voto negativo ?! Absolutamente, e de forma limpa, me deu uma bela caixa de diálogo! E só usa classes de inicialização "apropriadas"!
Dave

Tente retroceder alguns de seus elementos HTML - use a estrutura mais simples possível para testá-lo.
Dave

13

Bootstrap 3: Para manter os recursos responsivos para dispositivos pequenos e extra pequenos, fiz o seguinte:

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

está certo. isso funciona para mim. não esqueça de alterar a propriedade width para XX% para o layout responsivo. Btw, a versão no meu caso é 3.0.3
Jerry Chen

7

Foi isso que fiz, no meu custom.css, adicionei essas linhas e foi tudo.

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

Obviamente, você pode alterar o tamanho da largura.


7

Se Bootstrap> 3, basta adicionar estilo ao seu modal.

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

6

Encontrei esta solução que funciona melhor para mim. Você pode usar isto:

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

ou isso, dependendo de seus requisitos:

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

Veja o post em que descobri: https://github.com/twitter/bootstrap/issues/675


5

O FYI Bootstrap 3 lida com a propriedade esquerda automaticamente. Então, basta adicionar este CSS alterará a largura e a manterá centralizada:

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

Trabalhou para o B3! Muito obrigado!
Bagata

4

Preserve o design responsivo, defina a largura para o que você deseja.

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

Mantenha simples.


4

Alterando a classe, model-dialogvocê pode obter o resultado esperado. Esses pequenos truques funcionam para mim. Espero que ajude você a resolver esse problema.

.modal-dialog {
    width: 70%;
}

3

Com o Bootstrap 3, tudo o que é necessário é um valor percentual dado ao diálogo modal via CSS

CSS

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

11
sim, a navalha do occam vai para esta. testado em 3.0 funciona muito bem
Gui de Guinetik 13/11

3

Usei uma combinação de CSS e jQuery, juntamente com dicas nesta página, para criar uma largura e altura fluidas usando o Bootstrap 3.

Primeiro, algum CSS para lidar com a largura e a barra de rolagem opcional para a área de conteúdo

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

E alguns jQuery para ajustar a altura da área de conteúdo, se necessário

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

Gravação e código completos em http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/


3

No Bootstrap 3 com CSS, você pode simplesmente usar:

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

Isso garante que você não quebrar o design da página, porque nós estamos usando .modal-dialogem vez do .modalque será aplicado até mesmo para o sombreamento.


2

Tente algo como o seguinte (veja o exemplo ao vivo do jsfiddle aqui: 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

Em vez de usar porcentagens para tornar o modal responsivo, acho que pode haver mais controle usando as colunas e outros elementos responsivos já incorporados no bootstrap.


Para tornar o modal responsivo / o tamanho de qualquer quantidade de colunas:

1) Adicione uma div extra ao redor da div de diálogo modal com uma classe de .container -

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


2) Adicione um pouco de CSS para aumentar a largura modal -

.modal-dialog {
    width: 100% }


3) Como alternativa, adicione uma classe extra se você tiver outros modais -

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

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


4) Adicione uma linha / colunas se desejar vários modais de tamanho -

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

2

Adicione o seguinte no seu arquivo css

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

2

Use abaixo do script:

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

  overflow-y: scroll;
}

Demo :

Demonstração em gif


2

Eu o resolvi para o Bootstrap 4.1

Mistura de soluções postadas anteriormente

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


1

Resultado esperado alcançado usando,

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

1

Bootstrap 3.xx

   <!-- 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>

Observe que eu adicionei a classe .employeeModal na segunda div. Então denomine essa classe.

.employeeModal{
        width: 700px;
    }

captura de tela do snippet de código


0

Eu usei dessa maneira, e é um trabalho perfeito para mim

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

0

Solução menos baseada (sem js) para o Bootstrap 2:

.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; }
    }
}

Onde quer que você queira especificar uma largura modal:

#myModal {
    .modal-width(700px);
}

0

Eu usei o SCSS e o modal totalmente responsivo:

.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
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;
    }

ou

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.