️ Modal Preview সহ JavaScript window.print()
আমরা এবার শিখবো কীভাবে JavaScript এর window.print() ফাংশনের আগে একটি Modal Preview দেখানো যায়। এতে ইউজার তার কনটেন্ট প্রিন্ট করার আগে দেখতে পারবেন, এবং তারপরে সিদ্ধান্ত নিতে পারবেন প্রিন্ট করবেন কিনা।
ইনভয়েস Preview
নাম: জন ডো
ইমেইল: john@example.com
পেমেন্ট: ৳১,২০০.০০
তারিখ: ২৪ মে, ২০২৫
<script>
function showModal() {
let content = document.getElementById(“printContent”).innerHTML;
document.getElementById(“modalContent”).innerHTML = content;
document.getElementById(“printModal”).style.display = “block”;
}
function showModal() {
let content = document.getElementById(“printContent”).innerHTML;
document.getElementById(“modalContent”).innerHTML = content;
document.getElementById(“printModal”).style.display = “block”;
}
function closeModal() {
document.getElementById(“printModal”).style.display = “none”;
}
function printNow() {
let content = document.getElementById(“modalContent”).innerHTML;
let printWindow = window.open(”, ”, ‘width=800,height=600’);
printWindow.document.write(‘<html><head><title>Print</title></head><body>’ + content + ‘</body></html>’);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
closeModal();
}
</script>
ব্যাখ্যা:
showModal()ফাংশন Modal খুলে এবং প্রিভিউ দেখায়।printNow()কনটেন্ট প্রিন্ট করে ও Modal বন্ধ করে।closeModal()ফাংশনে ইউজার ইচ্ছা করলে Modal বন্ধ করতে পারে।