я хочу модальное отображение в полноэкранном режиме при открытии в мобильном представлении - PullRequest
Новая
       7

я хочу модальное отображение в полноэкранном режиме при открытии в мобильном представлении

0 голосов
/ 19 января 2019

На моем веб-сайте я хочу показывать модальное в полноэкранном режиме в мобильном представлении.

I Не известно о медиазапросе.поэтому, пожалуйста, помогите мне.

Что мне нужно добавить в 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>

модальный вид в мобильном представлении Я хочу показать модальный вид в мобильном телефоне следующим образом

1 Ответ

0 голосов
/ 19 января 2019

Попробуйте это скриптовая ссылка 

<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;
  }
}
...