How can I change the default width of a Twitter Bootstrap modal box?

后端 未结 30 2464
醉酒成梦
醉酒成梦 2020-11-27 08:38

I tried the following:

   
相关标签:
30条回答
  • 2020-11-27 09:21

    Altering the class model-dialog you can achieve expected result. These small tricks work for me. Hope it will help you to solve this issue.

    .modal-dialog {
        width: 70%;
    }
    
    0 讨论(0)
  • 2020-11-27 09:22
    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;
        }
    

    or

    body .nk-modal {
                /* new custom width */
                width: 560px;
                /* must be half of the width, minus scrollbar on the left (30px) */
                margin-left: -280px;
            }
    
    0 讨论(0)
  • 2020-11-27 09:23

    In Bootstrap 3 all you need is this

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

    Most of the above answers did not worked for me !!!

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

    0 讨论(0)
  • 2020-11-27 09:26

    In Bootstrap 3 with CSS you can simply use:

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

    This ensures you don't break the design of the page, because we're using .modal-dialog instead of .modal which will be applied even to the shading.

    0 讨论(0)
  • 2020-11-27 09:27

    Solution was taken from this page

    $('#feedback-modal').modal({
        backdrop: true,
        keyboard: true
    }).css({
        width: 'auto',
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });
    
    0 讨论(0)
  • 2020-11-27 09:28

    UPDATE:

    In bootstrap 3 you need to change the modal-dialog. So in this case you can add the class modal-admin in the place where modal-dialog stands.

    Original Answer (Bootstrap < 3)

    Is there a certain reason you're trying to change it with JS/jQuery?

    You can easily do it with just CSS, which means you don't have to do your styling in the document. In your own custom CSS file, you add:

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

    In your case:

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

    The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.

    0 讨论(0)
提交回复
热议问题