我希望在移动视图中打开时以全屏模式显示

Question

在我的网站中，我想在移动视图中全屏显示模式。

我不知道媒体查询。所以请帮助我。

我应该在 css 中添加什么才能在第二张图片中看起来像？

我上传了两张图片。 第一张图片是我目前在移动视图中查看的模态 第二张图片是关于我在移动视图中实际想要的。

提前谢谢你。

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%)
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #F7F8FA;
}
.modal-header .close {
    margin-top: 5px
}
.modal-header .back {
    margin-top: 5px
}
.modal-title {
    margin: 0;
    line-height: 1.42857143
}
.modal-body {
    position: relative;
    padding: 15px;
    height:350px!important;
    overflow-y:auto;
    overflow-x:hidden;
}
.modal-footer1 {
    padding:15px;
    border-top: 1px solid #e5e5e5;
    background-color: #F7F8FA;
}

<div id="step-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="content" hidden="" id="step-1">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="text-center">Hatchback car cleaning</h4>
                </div>
                <div class="modal-body">
                    <center>
                        <h4>Select the service you Need</h4>
                    </center>
                    <br/>
                    <div class="checkbox">
                        <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Quick Clean" name="select_service[]" checked="">&nbsp;&nbsp;&nbsp;Quick Clean
                                </div>
                            </div>
                        </label>
                    </div>
                    <hr/>
                    <div class="checkbox">
                        <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Exterior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Exterior Cleaning
                                </div>
                            </div>
                        </label>
                    </div>
                    <hr/>
                    <div class="checkbox">
                        <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Interior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Interior Cleaning
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="modal-footer1">
                    <button type="button" class="btn btn-primary1 btn-block" id="step-1-next">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

modal look in mobile view I want to show modal in mobile view like this

Answer 1

试试这个：

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%)
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0)
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: hidden;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px
}

.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #F7F8FA;
}

.modal-header .close {
  margin-top: 5px
}

.modal-header .back {
  margin-top: 5px
}

.modal-title {
  margin: 0;
  line-height: 1.42857143
}

.modal-body {
  position: relative;
  padding: 15px;
  height: 350px!important;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-footer1 {
  padding: 15px;
  border-top: 1px solid #e5e5e5;
  background-color: #F7F8FA;
}

@media(max-width:767px) {
  #step-modal {
    padding: 0px !important;
  }
  .modal-dialog {
    margin: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#step-modal">Open Modal</button>
<div id="step-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="content" id="step-1">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="text-center">Hatchback car cleaning</h4>
        </div>
        <div class="modal-body">
          <center>
            <h4>Select the service you Need</h4>
          </center>
          <br/>
          <div class="checkbox">
            <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Quick Clean" name="select_service[]" checked="">&nbsp;&nbsp;&nbsp;Quick Clean
                                </div>
                            </div>
                        </label>
          </div>
          <hr/>
          <div class="checkbox">
            <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Exterior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Exterior Cleaning
                                </div>
                            </div>
                        </label>
          </div>
          <hr/>
          <div class="checkbox">
            <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Interior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Interior Cleaning
                                </div>
                            </div>
                        </label>
          </div>
        </div>
        <div class="modal-footer1">
          <button type="button" class="btn btn-primary1 btn-block" id="step-1-next">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>

View on JSFiddle