Displaying Responsive Menucard within Popup

Responsive Menu Card within Popup.

Hello Friends,We can see how to display an responsive menu-card within popup using cascading style sheet. You can able to download this file and make changes in that file as you like. You can see download link button at the bottom of this post.

Source code:

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="author" content="" />
<title>NV2</title>
<link rel="shortcut icon" type="image/png" href="http://www.example.com/favicon.png" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<style>
html, body{height:100%;}
body {
background: url(home-page-banner.jpg);
background-size: cover;
background-repeat: no-repeat;
height:100%;
}
@keyframes pulse_animation {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
.pulse {
animation-name: pulse_animation;
animation-duration: 5000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.menu{
background: url(Capture.jpg);
background-size: cover;
background-repeat: no-repeat;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}

/* The Close Button */
.close {
color: black;
float: right;
font-size: 48px;
font-weight: bolder;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.modal-header {
padding: 2px 16px;
background-color: orangered;
color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
padding: 2px 16px;
/* background-color: #3498a6; */
color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}

@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}

</style>
</head>
<body>
<div style="margin-top:50px; text-align:center">
<h2 style="color:white">
Indian Restaurant
</h3>


<button id="myBtn" class="btn pulse" style="text-align:center; background-color:#FF4500; color:white">Menu Card</button>
</div>

<div id="myModal" class="modal">


<div class="modal-content menu">
<div class="modal-header">
<span class="close">&times</span>
<h3 class="col-lg-offset-5">Today's Special</h3>
</div>
<div class="modal-body"><div class="span7">
<div class="widget stacked widget-table action-table">

<div class="widget-header">
<h3 class="icon-th-list" style="color:white">Menu</i>
</div> 

<div class="widget-content">

<table class="table table-bordered">
<thead>
<tr>
<th style="color:#9fec0b; font-weight: bolder; font-size:18px">Biryani</th>
<th style="color:#9fec0b; font-weight: bolder; font-size:18px">Tandoori & Kabab</th>
<th style="color:#9fec0b; font-weight: bolder; font-size:18px">Soups</th>

</tr>
</thead>
<tbody>
<tr>
<td style="color:#ff4500; font-weight: bolder">Chicken Biryani - Rs.180</td>
<td style="color:#ff4500; font-weight: bolder">Chicken Tandoori(full 4pcs) - Rs.280</td>
<td style="color:#ff4500; font-weight: bolder">Sweet Corn Soup(Veg/Chicken) - Rs.140</td>
</tr>
<tr>
<td style="color:#ff4500; font-weight: bolder">Mutton Kacchi Biryani - Rs.270</td>
<td style="color:#ff4500; font-weight: bolder">Chicken Tikka Kabab(6pcs) - Rs.180 </td>
<td style="color:#ff4500; font-weight: bolder">Hot & Sour Soup(Veg/Chicken)- Rs.140</td>
</tr>
<tr>
<td style="color:#ff4500; font-weight: bolder">Daryabadi biryani - Rs.300</td>
<td style="color:#ff4500; font-weight: bolder">Mutton Galawati Kabab(4pcs) - Rs.190</td>
<td style="color:#ff4500; font-weight: bolder">Thai Soup - Rs.160</td>
</tr>
<tr>
<td style="color:#ff4500; font-weight: bolder">Veg.Biryani - Rs.150</td>
<td style="color:#ff4500; font-weight: bolder"> Chicken Peshwari(5pcs)- Rs.190 </td>
<td style="color:#ff4500; font-weight: bolder">Veg Clear Soup - Rs.130</td>
</tr>
<tr>
<td style="color:#ff4500; font-weight: bolder">Mutton Biryani - Rs.180</td>
<td style="color:#ff4500; font-weight: bolder">Mutton Boti Kabab(4pcs) - Rs.220 </td>
<td style="color:#ff4500; font-weight: bolder">Tomato Soup - Rs.130</td>
</tr>
<tr>
<td style="color:#ff4500; font-weight: bolder">Mutton Awadi Biryani - Rs.320</td>
<td style="color:#ff4500; font-weight: bolder">Mutton Barra Kabab(full 4pcs) - Rs.350 </td>
<td style="color:#ff4500; font-weight: bolder">Indian Special Soup - Rs.120</td>
</tr>
</tbody>
</table>

</div> 

</div> 
</div>
</div>
<div class="modal-footer">
<h3>Developed By NV2 Developers</h3>
</div>
</div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

</body>
</html>

Output:

Fig:Displaying a menu-card with in popup.