发表新帖
发表新帖

How to vertically align Bootstrap v4 modal dialogs

后端 未结
关注
10 1323
轻奢々
轻奢々 2020-12-08 02:45

Vertically center modal dialogues in Bootstrap 4.

Note: The requirements below have been added to make it clear I am looking for a prop

相关标签:
10条回答
  • 予麋鹿
    2020-12-08 03:20

    Another simple way to make your modal vertical align is to adjust top: 50%;, transform: translateY(-50%); and margin: 0 auto to the modal dialog class.

    Edit: The downside is that you also have to set max-height: 100vh; to .modal-content. Otherwise the top of modal is not accessible anymore when your modal is getting heigher than the viewport.

    Demo:

    .modal.vertically-modal .modal-dialog {
  transform: translateY(-25%);
  top: 50%;
  margin: 0 auto;
}

.modal.vertically-modal.show .modal-dialog {
  transform: translateY(-50%);
}

.modal-content {
  max-height: 100vh;
  overflow-y: auto;
  padding: 40px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js "></script>

<button class="btn btn-primary" data-toggle="modal" data-target=".vertically-modal">Show modal</button>

<div class="modal fade vertically-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      Vertically modal
    </div>
  </div>
</div>

    0 讨论(0)
  • 攒了一身酷
    2020-12-08 03:20

    Try this,

    ::ng-deep{
    .modal-body{
        padding: 0.25rem;
        width: 600px !important;
    }
    .modal-content {
        position: relative;
        display: flex;
        flex-direction: row;
        margin-top: auto;
        margin-bottom: auto;
        width: 600px !important;
      }
}
    0 讨论(0)
  • 旧巷少年郎
    2020-12-08 03:23

    There is a much easier way of achieving this without having to write a bunch of CSS overrides or other custom CSS, basically using just the stock bootstrap classes and adding one extra HTML element to control the height.

    CSS (Not Needed see below)

    .modal > .row{
    flex: 1;
}

    HTML (Updated see below)

    <div id="dialogBox" class="modal fade d-flex">
    <div class="row justify-content-center"> <!-- Vertically Align Modal -->
        <div class="modal-dialog align-self-center" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

    Then to use:

    JS

    $("#dialogBox").modal('show');

    OR HTML

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialogBox">
  Launch demo modal
</button>

    There is probably a way to achieve the desired result using only the bootstrap .row, .col and flex-XXX classes but I was unable to get that to work.

    One last note, you might have to add: <body class="d-flex"> to get everything to work depending on the rest of your CSS.

    UPDATE

    There is a way to achieve this using only bootstrap classes, h-100 and w-100:

    <div id="dialogBox" class="modal fade d-flex">
    <div class="row justify-content-center w-100"> <!-- Vertically Align Modal -->
        <div class="modal-dialog align-self-center" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
    0 讨论(0)
  • 既然无缘
    2020-12-08 03:25

    Just use this class " modal-dialog-centered " for showing Modal on center of screen Vertically .

    for exmaple: 

    <div class="modal-dialog modal-dialog-centered" role="document">

    Thanks

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