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

时间：2019-01-19 07:09:30

标签： jquery css media-queries

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

我不知道有关媒体查询的信息。所以请帮助我。

我应该在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

1 个答案:

答案 0 :(得分：1)

尝试一下 fiddle link 

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


.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;
  }
}
相关问题
最新问题