Full Screen Bootstrap Modal Popup

Posted by & filed under CSS, HTML5.

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.

Full Screen Bootstrap Modal Popup

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">&times;</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

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!