发表新帖
发表新帖

Increase modal size for Twitter Bootstrap

前端 未结
关注
17 1592
抹茶落季
抹茶落季 2020-12-12 11:44

I am trying to change the size of the modal form or rather - have it respond to the content I render there. I am using it to render a form and would prefer to deal with scro

相关标签:
17条回答
  • 栀梦
    2020-12-12 11:58

    Here is another simple method to increase the size of the bootstrap modal:

    $(".modal-dialog").css("width", "80%");

    The width of the modal can be specified in terms of percentage of the screen. In the above example i have set it to 80% of my screen width.

    Below is an working example of the same:

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

    0 讨论(0)
  • 闹比i
    2020-12-12 11:59

    I was recently trying this and got this correct: Hope this will be helpful

     .modal .modal-body{
        height: 400px;
    }

    This will adjust height of your model.

    0 讨论(0)
  • 闹比i
    2020-12-12 12:02

    I was having the exact same problem, you can try:

    .modal-body {
    max-height: 800px;
}

    If you notice the scroll-bars appear only on the body section of the modal dialog, this means that the max-height of only the body needs to be adjusted.

    0 讨论(0)
  • 萌比男神i
    2020-12-12 12:02

    in Bootstrap 3:

    .modal-dialog{
  width:whatever
}
    0 讨论(0)
  • 青春惊慌失措
    2020-12-12 12:03

    Mixing up two methods for width and height and you have a good hack:

    CSS:

    #myModal .modal-body {max-height: 800px;}

    JQuery:

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

    This one is the one I use. It fixs the margin and the scrollbars issues for both width and height but it won't resize the modal to fit its content.

    Hope I was of help!

    0 讨论(0)
  • 春和景丽
    2020-12-12 12:07

    Tried a few of the above as need to set specific sizes of width and height (to display an image in a modal)and as none above helped me I decided to override the styles and have added the following to the main < div > that has class="modal hide fade in" in it : i.e. added a width to the style tag for the background of the modal.

    style="display: none; width:645px;"

    and then added the following 'style' tags to the modal-body:

    <div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

    works like a charm now, I'm displaying an image and now it fits perfect.

    0 讨论(0)
 看不清?
提交回复
热议问题