Popup html Table
This is a popup button table.
By clicking on this button, a popup table will be visible. The code of this button is given below. You can create a popup table like this if you wish. You can create a list as you wish. Through edit. নিচে বাটনে ক্লিক করলে পপআপ টেবিল দেখতে পাবেন।
Popup Product Price List Demo Table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Product Price List</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
button { padding: 6px 12px; cursor: pointer; }
/* Modal backdrop */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
align-items: flex-start; /* top এ রাখবে */
justify-content: center;
padding-top: 50px; /* উপরে কিছু gap */
}
/* Modal content */
.modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
width: 70%; /* টেবিলের প্রস্থ 70% */
height: 70%; /* টেবিলের উচ্চতা 50% */
overflow: auto; /* table বড় হলে স্ক্রল হবে */
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ccc;
padding: 6px;
text-align: center; /* default সব কলাম center */
font-size: 14px;
}
th { background: #f2f2f2; }
/* Product Name column (2nd column) left align */
td:nth-child(2), th:nth-child(2) {
text-align: left;
padding-left: 10px;
}
</style>
</head>
<body>
<h2>Popup Product Price List Demo</h2>
<button id="bakul">Open Product Price List</button>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<h3>Product Price List</h3>
<table>
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Category</th>
<th>Brand</th>
<th>Unit</th>
<th>Stock</th>
<th>Price (৳)</th>
<th>Discount</th>
<th>Final Price (৳)</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Soap</td><td>Cosmetics</td><td>Lifebuoy</td><td>1 pc</td><td>120</td><td>35</td><td>5%</td><td>33</td><td>Hot Sale</td></tr>
<tr><td>2</td><td>Shampoo</td><td>Cosmetics</td><td>Sunsilk</td><td>200ml</td>
<td>80</td><td>180</td><td>10%</td><td>162</td><td>Bestseller</td></tr>
<tr><td>3</td><td>Rice</td><td>Food</td><td>ACI</td><td>5kg</td><td>50</td><td>450</td><td>8%</td><td>414</td><td>Fresh</td></tr>
<tr><td>4</td><td>Cooking Oil</td><td>Food</td><td>Rupchanda</td><td>2L</td>
<td>60</td><td>380</td><td>5%</td><td>361</td><td>Popular</td></tr>
<tr><td>5</td><td>Tea</td><td>Beverage</td><td>Tetley</td><td>400g</td><td>70</td><td>220</td><td>12%</td><td>194</td><td>New Arrival</td></tr>
<tr><td>6</td><td>Milk Powder</td><td>Dairy</td><td>Nido</td><td>500g</td><td>40</td><td>520</td><td>7%</td><td>484</td><td>Premium</td></tr>
<tr><td>7</td><td>Biscuit</td><td>Food</td><td>Olympic</td><td>12 pcs</td><td>200</td><td>120</td><td>10%</td><td>108</td><td>Regular</td></tr>
<tr><td>8</td><td>Soft Drink</td><td>Beverage</td><td>Coca Cola</td><td>1L</td><td>150</td><td>70</td><td>5%</td><td>67</td><td>Hot Sale</td></tr>
<tr><td>9</td><td>Sugar</td><td>Food</td><td>Fresh</td<td>1kg</td<td>100</td<td> 110</td><td>3%</td><td>107</td><td>Essential</td></tr>
<tr><td>10</td><td>Salt</td><td>Food</td><td>ACI Pure</td><td>1kg</td><td>180</td><td>35</td><td>0%</td><td>35</td><td>Daily Use</td></tr>
</tbody>
</table>
<br>
<button id="closeModal">Close</button>
</div>
</div>
<script>
const modal = document.getElementById("myModal");
document.getElementById("bakul").onclick = () => modal.style.display = "flex";
document.getElementById("closeModal").onclick = () => modal.style.display = "none";
window.onclick = (e) => { if (e.target === modal) modal.style.display = "none"; };
</script>
</body>
</html>
```````````````````````````````````````````end
0 Comments:
Post a Comment