- “document.querySelector()” Method
- “document.getElementById()” Method
The mentioned approaches will be demonstrated one by one!
The “document.querySelector()” method fetches the first element that matches the corresponding CSS selector. This method can be utilized to access the “div” element to access the corresponding functionalities and display them.
Here, CSS selectors refer to “div”, which will be accessed.
The following example explains the stated concept.
Firstly, assign the specified “class” and “id” to the added div element. For the pop-up, assign the class named “popup” to the div element. Then, include a heading specified in the “<h3>” tag and separate buttons for opening and closing the pop-up. Also attach an “onclick” event to both buttons invoking the specified functions:
After that, declare a function named “openDiv()” to fetch the “div” element by passing its id in the “document.querySelector()” method and set its display as “block” to start the block at a new line and take up the screen width:
Similarly, define the “closeDiv()” function and repeat the above steps for closing the popup by specifying “none” as the display property value:
Last, style the added divs according to your requirements:
It can be seen that when the “Show PopUp” button is clicked, a new div element is popped up in the center of the web page:
The “document.getElementById()” method gets an element with the specified id. This method can be implemented to access the specified id for opening and closing the created popup.
In the given syntax, “elementID” indicates the id of the particular element that needs to be fetched.
Firstly, add two divs as we did previously. Then, include an image and specify its path along with its dimensions to be contained within the popup. After that, include the following buttons along with an “onclick” event as discussed in the previous method:
Now, in the openDiv() and closeDiv() methods, utilize the document.getElementById() method for accessing the required div and set its display property value accordingly:
Lastly, style you web page as per your requirements:
In this particular method, we will implement the required task by applying “jQuery” along with its methods for showing and hiding the created popup.
The following example illustrates the stated concept.
First, include the “jQuery” library in the script tag:
Likewise, assign the following class and id to the “div” element for the overall document and popup respectively. Then, include the following paragraph within the popup. Also, repeat the discussed methods for including the buttons invoking the specified functions upon triggering the “onclick” event:
Now, create a function named “openDiv()” that will access the div having “overlay” id and apply the “show()” method in order to display the created popup:
For closing the popup, define the function named “closeDiv()” and in its function definition, invoke the “hide()” method on the accessed id to close the popup:
Lastly, style your web page element accordingly: