Creating a JavaScript popup script from scratch

Question

Creating a JavaScript popup script from scratch

I'm looking to create a script using only JavaScript that will display a popup when the page loads.
The background should be faded and I want to include custom content in the popup. I don't want to utilize CSS or HTML directly.
Embed the CSS and HTML within the JavaScript code. Is there anyone who can assist me with this project?
I am comfortable handling the styling aspect on my own.
I am limited to creating a popup with external CSS and HTML, not just pure JS. The popup needs to be simple and appear when the page loads.

Your help would be greatly appreciated!!

Preferably, I'd like to use JSFiddle for this task.

javascript css popup

Answer 1

Answer №1

Here is an updated solution:

To show or hide a popup using CSS, you can simply utilize the display style property and toggle it on button onClick event.

Updates:

Add a placeholder element for the popup in the DOM
Apply CSS styles for the popup - refer to the provided CSS in the answer
Inject the popup into the DOM dynamically using the innerHTML property of JavaScript and include the necessary JS functions for showing/hiding the popup

This is an example implementation:

document.body.onload = addElement;

function addElement () { 
  var newDiv = document.createElement("div"); 
  newDiv.innerHTML += '<button class="open_button" onClick="openPopup()">Open Popup</button><div id="popup" style="position: absolute;width: 300px;z-index: 999;display: none;top:0;background-color: #fff;border: 1px solid #ddd;border-radius: 5px;box-shadow: 0 2px 8px #aaa;overflow: hidden;padding: 10px;"><div class="popup_body" style="height: 100px;">This is a sample popup</div><button class="close_button" onClick="closePopup()">Close</button</div>';

  var currentDiv = document.getElementById("main_container"); 
  document.body.insertBefore(newDiv, currentDiv); 

  openPopup();
}

function openPopup() {
  var el = document.getElementById('popup');
  el.style.display = 'block';
  
  document.body.style.background = '#353333'; // Update: set window background color to black
}

function closePopup() {
  var el = document.getElementById('popup');
  el.style.display = 'none';
  document.body.style.background = 'white';
}

Answer 2

Here is an updated solution:

To show or hide a popup using CSS, you can simply utilize the display style property and toggle it on button onClick event.

Updates:

Add a placeholder element for the popup in the DOM
Apply CSS styles for the popup - refer to the provided CSS in the answer
Inject the popup into the DOM dynamically using the innerHTML property of JavaScript and include the necessary JS functions for showing/hiding the popup

This is an example implementation:

document.body.onload = addElement;

function addElement () { 
  var newDiv = document.createElement("div"); 
  newDiv.innerHTML += '<button class="open_button" onClick="openPopup()">Open Popup</button><div id="popup" style="position: absolute;width: 300px;z-index: 999;display: none;top:0;background-color: #fff;border: 1px solid #ddd;border-radius: 5px;box-shadow: 0 2px 8px #aaa;overflow: hidden;padding: 10px;"><div class="popup_body" style="height: 100px;">This is a sample popup</div><button class="close_button" onClick="closePopup()">Close</button</div>';

  var currentDiv = document.getElementById("main_container"); 
  document.body.insertBefore(newDiv, currentDiv); 

  openPopup();
}

function openPopup() {
  var el = document.getElementById('popup');
  el.style.display = 'block';
  
  document.body.style.background = '#353333'; // Update: set window background color to black
}

function closePopup() {
  var el = document.getElementById('popup');
  el.style.display = 'none';
  document.body.style.background = 'white';
}

Creating a JavaScript popup script from scratch

Answer №1

Updates:

Similar questions

Meteor is failing to update the data in MongoDB

JavaScript allows you to create matrices from squares

Arranging components in a horizontal layout on Jquery mobile

encasing a container element around every trio of elements

How can I monitor and handle JavaScript errors without causing TestCafe tests to fail?

Error encountered in NextJS middleware: NetworkError occurred while trying to retrieve resource

How do I specify filter selectors for events passed as an object in JQuery's on() method?

Design for implementing "new" functionality in JavaScript

Discover the combobox element and its value can be easily achieved by using Selenium's find_element_by_xpath method

Terminate the JWT token and automatically log out the user in the event of a banning or modification

"Data is not defined" error message is triggered when using jQuery DataTable Row Details

Double-checked in p:commandButton, encountering a race condition with oncomplete

Ensuring each field is filled correctly in a step-by-step registration form

Reveal a segment of a picture

How to deactivate the dropdown hover effect in ngx-intl-tel-input

When it comes to JavaScript, it considers the number 0 as equivalent

Enter information into the TextArea and jQuery dialog

navigating a collection of objects and retrieving individual property values

What can be done to stop the caching of the route that router.push() redirects to in Next.js middleware?

Encountering a "Text creation error" while trying to run a three.js demo on Microsoft Edge using the WebGL context