Given an HTML document and the task is to design a button that would pop-up a print dialog box. We are going to use JavaScript to do the assigned task:
- Approach::
- Add a button which links to a JavaScript Function.
- Inside the JavaScript Function, use the JavaScript default function to call the print dialog box
Syntax:
window.print
Example:
<!DOCTYPE html><html>ÂÂ<head>Â Â Â Â<title>create a pop-up to printÂÂ Â Â Â Â Âdialog box using JavaScript</title></head>ÂÂ<body>Â Â Â Â<center>Â Â Â Â Â Â Â Â<h1style="color:green">neveropen</h1>Â Â Â Â Â Â Â Â<script>Â Â Â Â Â Â Â Â Â Â Â Âfunction printPopUp() {Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Âalert("Pop-up dialog-box")Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Âwindow.print();Â Â Â Â Â Â Â Â Â Â Â Â}Â Â Â Â Â Â Â Â</script>ÂÂÂ Â Â Â Â Â Â Â<buttononclick="printPopUp()">Print</button>Â Â Â Â</center></body>ÂÂ</html>Output:
Before:
After:
- Approach::
- Use DOM onload Event in body tag.
- Use window alert method for pop-up dialog-box and window.print to print the document.
Example:
<!DOCTYPE html><html>ÂÂ<head>   Â<title>create a pop-up to print     Âdialog box using JavaScript</title></head>ÂÂ<bodyonload="alert('Pop-up dialog-box');window.print();">   Â<center>       Â<h1style="color:green">         Âneveropen     Â</h1>     Âcreate a pop-up to print dialog box using JavaScript Â</center></body>ÂÂ</html>Output:
- Approach::
- Use <a> href attribute to hyperlink text.
- Use window alert method for pop-up dialog-box and window.print to print the document.
Example:
<!DOCTYPE html><html>ÂÂ<head>   Â<title>create a pop-up to print     Âdialog box using JavaScript</title></head>ÂÂ<body>   Â<center>       Â<h1style="color:green">         Âneveropen     Â</h1>       Â<ahref="javascript:alert('Pop-up dialog-box');window.print();">         ÂClick Me     Â</a> Â</center></body>ÂÂ</html>Output:
Before:
After:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
