Harshita Savaj
Reputation: 23
i want modal display in full screen when open in mobile view
In my website, I want to show modal in full screen on mobile view.
I Not known about media query. so please help me.
What should I have to add in css to look like In 2nd image?
I upload two images. First image is my currently looking modal in mobile view and second image is about what actually I want in mobile view.
Thank you in advance.
.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">×</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=""> 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[]"> 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[]"> 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
Upvotes: 2
Views: 6400
Answers (1)
Vel
Reputation: 9341
Try this:
.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">×</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=""> 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[]"> 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[]"> 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>Upvotes: 3
Related Questions
- Bootstrap modal issue with browser full screen
- How to make Twitter bootstrap modal full screen
- How to make a modal fullscreen?
- Bootstrap 4 modal backdrop is not covering full view on mobile devices
- Bootstrap 4 modal not working on mobile - unable to close modal or view it correctly
- Modal covering the entire screen of the device
- Bootstrap Modal not show fullscreen
- Bootstrap modal fullscreen issue
- How to make a full screen modal using bootstrap-modal?
- Bootstrap v2.1.1 Modal Not getting fit correctly on mobile screen