The importance of pop-ups for websites is constantly on the rise. A pop up is basically a display area that appears on the website or visual interface. In simple words, pop-ups are dialogue boxes that appear anywhere on your website depending upon the code behind. One of the most common examples of a pop-up is a dialogue box asking you to confirm whether you want to close a tab or not. However, websites use these boxes frequently for different purposes. Pop-ups or model windows are very common User Interface elements and you can expect to find them on every other website.
You can single or double click a mouse to initiate a dialog box. Similarly, you can also display pop-ups on the screen by speaking out certain commands. Some pop-ups automatically appear on your window after a certain period of time.
Web developers use different technologies, most important of which are JavaScript, JavaScript Applets, JQuery, JQuery Plugins, Foundation Models and Twitter Bootstrap Model, etc. to generate such boxes. You can also create such a box by using a new HTML tag and subsequently, display the pop-up using a simple JQuery code. The new Dialogue tag allows the web developers to integrate a simple pop-up on the website with the utmost ease.
There is only one drawback of using a Dialogue tag. Currently, only Google Chrome, Opera, and Safari support this particular tag whereas Firefox and Internet Explorer don’t.
HTML Markup for a Simple Pop Up:
Following is the HTML code for generating a dialogue box on your website.
<!DOCTYPE HTML> <html> <head> <title>The Window Dialogue Box</title> </head> <body> <button id=“show”>>Show Pop-Up</button> <dialog id=“popup”> <h4>Simple Pop-up Box!</h4> This is a simple Pop-Up. It is used for different purposes such as asking users if they want to close the tabs. <button id=“close”>>Close Pop-Up</button> </dialog> </body> </html>
The output of the above code is as follows:
As you can see, Google Chrome is only displaying the Show Pop-Up button and the actual dialog box is nowhere to be seen. What we have done so far is that we have used HTML <Dialog> tag to create a Pop-Up Box, and used HTML <button> tag twice to create the opening and closing pop-up buttons. It is also pertinent to note that the closing pop-up button is nested within the Dialog element. The structure of this code is such that only Show Pop-Up button is visible whereas Pop-Up box is still in the hidden state. This is where we implement JQuery to actually display the pop-up box.
We can show and exit the box by using two JQuery APIs that are .show () and .close () respectively. Following is the code to achieve our goal.
(function () {
Var dialog = getElementById( ‘popup’ );
document.getElementById( ‘show’ ) .onclick = function () {
dialog.show ();
document.getElementById(‘close’) .onclick = function () {
dialog.close ();
};
})();
This is one of the simplest JQuery codes you can use to display a popup box in the window. What we have done here is to use APIs .show () and .close () to actually display and exit the dialog box. We have made the dialogue tag as a variable and made it appear and disappear from the window using JavaScript and JQuery. In this example, we start by selecting the main dialog element using JavaScript. Subsequently, we use .show () for Show Pop-up tab to display the box on your screen. What this code actually does is display the box when we click the Show Pop-up tab. Similarly, we use the same procedure to close the box but this time we use the .close () for the closing button element with an id of “close”.
Now, if you click on the Show Pop-up button, a pop-up box will appear in the top and center of the page. The following is the screenshot. It is pertinent to note that you can directly write the JavaScript and JQuery code in the HTML file. Or you can write the code in a separate file, save it with the extension .js and integrate with HTML file.
Now, you simply have to click the Close Pop-up button if you want to close this dialog box.
As you can see, our dialog box looks very generic and dull. It is interesting to note that you can always style this dialog box using normal CSS. Similarly, we don’t need to give new ids to elements or tags. The ids you have used for JQuery will do the job in CSS as well. Take a look at the following example.
<!DOCTYPE HTML> <html> <head> <title>The Window Dialogue Box</title> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0Adialog%20%7B%0A%0Abackground%3A%20%23E8E8E8%3B%0A%0Awidth%3A%20500px%3B%0A%0Aborder%3A%201px%20solid%20black%3B%0A%0Aborder-radius%3A%2010px%3B%0A%0Apadding%3A%205px%2010px%2020px%2020px%3B%0A%0Afont-family%3A%20sans-serif%3B%0A%0A%7D%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> </head> <body> <button id=“show”>>Show Pop-Up</button> <dialog id=“popup”> <h4>Simple Pop-up Box!</h4> <p>This is a simple Pop-Up. It is used for different purposes such as asking users if they want to close the tabs.</p> <button id=“close”>>Close Pop-Up</button> </dialog> </body> </html>
In this example, we have integrated the CSS code in our HTML file. However, the standard procedure is to write the CSS on the separate sheet and then integrate it with HTML.
The pop-up box will look like as following after styling it with CSS.
Now, the pop-up box has become much more professional and attractive. It is pertinent to note that dialog box creation is going to become even more fun as a new pseudo-element called Backdrop will soon be available for the Dialog element. The main purpose of this element is to help visitors focus on the message given in the box and forget everything around or behind it. The element will solely be used to design dim backgrounds found behind most pop-up boxes.
Concluding, this is how you can create a simple button for displaying a pop-up box by employing a combination of very simple HTML, JavaScript, and of course, JQuery. All these languages have evolved so much over the years that we can also use them to develop interactive and attractive UIs in addition to web designing and development.
About the Author
ByteScout Team of Writers
ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.
Lambda expressions in Python In lambda programming, a definition of a function not determined by any object is called the lambda expression or the anonymous...
Create a Tetris Game Using JavaScript A few days back, I was learning JavaScript concepts. In order to sharpen my skills, I thought to myself...