Full Screen Bootstrap Modal Popup
In this tutorial we are going to see how to make responsive Full Screen Bootstrap Modal Popup. First we are going to add Bootstrap Modal Popup to our page, then using CSS media query making responsive Full Screen Bootstrap Modal Popup.
Steps:
1. Create basic HTML template.
2. Add simple Bootstrap Modal Popup.
3. Make Full Screen Bootstrap Modal Popup Using CSS media query.
Create Basic HTML template.
First create modal folder in your server root directory. Then create index.html file in it, and add the following basic HMTL markup in it. Also create css and js folder in the modal folder to keep clean structure. Now download jQuery and Bootstrap from the respective sites and add it to the respective folders.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Modal jQuery Autocomplete</title>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Noto+Serif:400,700">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Add simple Bootstrap Modal Popup.
Now copy the following HTML markup and paste it in your index.html file within the body tag.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fullscreen-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Make Full Screen Bootstrap Modal Popup Using CSS media query.
Now add fullscreen-modal class to your modal, because using fullscreen-modal class only we are writing css media query to make Bootstrap Modal as Responsive Full Screen Bootstrap Modal Popup. Please copy and paste the following CSS in your style.css file or in your index.html file with in style tag.
/*
Full screen Modal
*/
.fullscreen-modal .modal-dialog {
margin: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
}
@media (min-width: 768px) {
.fullscreen-modal .modal-dialog {
width: 750px;
}
}
@media (min-width: 992px) {
.fullscreen-modal .modal-dialog {
width: 970px;
}
}
@media (min-width: 1200px) {
.fullscreen-modal .modal-dialog {
width: 1170px;
}
}
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
