Untitled

To create a pop-up window when you click on an icon using HTML and CSS, you can follow these steps:

Create a button or an icon that you want to use as the trigger for the pop-up window. You can use the <button> or <a> tag and add a class or an ID to it.

Create the content of the pop-up window. You can use HTML to create the content of the window, such as images, text, or forms.

Use CSS to hide the pop-up window. Set the display property of the pop-up window to "none".

Use CSS to style the trigger button or icon. You can use the :hover pseudo-class to change the appearance of the button when the user hovers over it.

Use JavaScript to show the pop-up window when the user clicks on the trigger button or icon. You can add an event listener to the trigger button or icon, and then use the display property to show the pop-up window.

Here's an example code:

HTML:

<button id="myBtn">Click me!</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>This is a pop-up window!</p>
  </div>
</div>
CSS:

css
/* Hide the pop-up window */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

/* Style the pop-up window content */
.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* Style the trigger button or icon */
#myBtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* Change the appearance of the trigger button or icon when hovered */
#myBtn:hover {
  opacity: 0.8;
}


JavaScript:

// Get the pop-up window and the trigger button or icon
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the pop-up window
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button or icon, show the pop-up window
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the pop-up window
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the pop-up window, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
This code will create a pop-up window that appears when the user clicks on the "Click me!" button. The pop-up window will contain a message, and the user can close the window by clicking on the "x" button or anywhere outside of the window.