Create a modal using only HTML and CSS, no Javascript

Is it possible to create a modal using only HTML and CSS, without any JavaScript?

I'm working on a project where I cannot use JavaScript but I still need a modal.

<!DOCTYPE html>
<html>
<title>Minimal Modal Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.example.css">
<body>

<div class="modal-container">
  <h2>Custom Modal Design</h2>
  <button class="open-modal-button">Open Modal</button>

  <div class="modal">
    <div class="modal-content">
      <div class="modal-close-button">&times;</div>
      <p>Your text goes here.</p>
      <p>Your text goes here.</p>
    </div>
  </div>
</div>

</body>
</html>
htmlcss

Answer №1

Check out this clever solution that utilizes CSS :target along with anchor links for a simple implementation.

dialog { display: block; }

dialog:not(:target):not([open]) { display: none; }
<html>
  <body>
      <p>
        <a href="#dialog">Open dialog</a>
      </p>

      <dialog id="dialog">
        <h2>Dialog</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#!">Close</a>
      </dialog>
  </body>
</html>

Answer №2

as easy as pie

* {
  font-family:"Segoe UI",sans-serif;
}

input[type='checkbox']{
  display:none;
}

#btn {
  padding:5px 10px;
  background: yellowgreen;
  color:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
}

#cnt {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: hotpink;
  top: 0;
  left: 0;
  display:flex;
  align-items:center;
  justify-content: center;
  pointer-events:none;
  display:none;
}

.close {
  position: fixed;
  top: 20px;
  right: 20px;
  display:none;
  cursor:pointer;
}

input:checked + div + #cnt {
  display:flex;
}

input:checked + div + #cnt + .close {
  display:block;
}
<label>
  <input type="checkbox">
  <div id="btn">CLICK HERE</div>
  <div id="cnt">CONTENT</div>
  <div class="close">CLOSE</div>
</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to attach an event listener to detect the coordinates where a click occurs inside a div element?

Imagine a situation where you have a div container measuring 200px by 500px. The goal is to implement an event listener that can identify the x and y coordinates within this div when it is clicked. What would be the approach to achieve this in React? ...

javascripthtmlreactjs

Enhancing user experience by highlighting invalid input fields with a red border using client-side HTML5 validation and Bootstrap 5.2

When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...

htmlcssformsvalidation

Button positioned in the upper right corner

Trying to create a navigation menu like the one shown in the image below. https://i.sstatic.net/N9BQ5.png I've successfully styled the right corner, but I'm struggling to extend the top left corner. https://i.sstatic.net/cL0ZK.png Below is th ...

htmlcss

Arranging identical elements with a comma in between

My xquery is designed for a collection of books that have multiple topics associated with each one. When I run the query, all the topics are grouped together in one cell of the table (which is what I want), but they are difficult to separate. let $books : ...

htmlxmlformattingxquery

Restrict the number of dynamic form elements to a maximum of 10 entries

I am working on a feature where users can refer their friends and the data will be saved in a database. <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' sr ...

javascriptphpjqueryhtml

How to ensure uniform button sizes in an HTML form by setting them all equal to the size

The code snippet provided below demonstrates a basic form with two submit buttons. <form> <input type="submit" value="< Previous"> <input type="submit" value="Next >"> </form> Depending on the value attribute, the bu ...

cssforms

What are the best methods for detecting devices in order to create customized CSS styles for iPad and Galaxy Tab?

Ensuring my web application is compatible with various devices is crucial. While I have created a common CSS for all mobile and tablet devices, it seems to be causing some problems specifically on the iPad. After finding a fix tailored for the iPad, I now ...

javascriptcss

Display each div one at a time

I am working on a script that should reveal my divs step by step. However, the current code only shows all the divs at once when clicked. How can I modify it to detect each individual div and unveil them one by one? For example, on the 1st click => expa ...

javascriptjqueryhtmlcss

Creating tables in HTML is a useful skill to have. Follow these steps

I am looking to create a simple HTML table, and I have provided my code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=" ...

htmlhtml-table

Create a page turning effect in React that simulates scrolling a certain amount at a time

Is there a way to disable default scrolling and have the page automatically scroll to the next item? For example, if I have element2 below element1, how can I set it up so that when I scroll down once, the page scrolls directly to the position of element2 ...

javascriptcssreactjsscrollnodes

Creating a carousel with a curved dial or wheel: A step-by-step guide

My goal is to create a carousel with curved container and downward movement for items not in focus. The description should change based on the focused item, and I prefer the carousel not to autoplay. via GIPHY I've been searching online for a soluti ...

jquerycsscarouselcurveowl-carousel-2

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

drop down menu in navigation bar: unable to display items

I am having trouble with a dropdown menu in my code. Even though I used the code from the official Bootstrap website, the items are not appearing in the dropdown list. <nav class="navbar navbar-expand-lg navbar-dark bg-primary "> ...

htmlangular6angular-ui-bootstrap

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

PHP mail function not working properly when ajax is used

On my MAC, I am attempting to utilize php mail with ajax implementation. I have simplified my code to just strings: In my .js file : function sendMail() { $('#sending').show(); $.ajax({ type:'POST', ...

phpjqueryajaxhtml

jQuery is optimized to work specifically with select id tags

Here is the HTML code snippet I've put together, along with my script. While I admit it might look a bit messy, please bear with me as I'm still in the learning phase. If anyone could offer some assistance on this matter, I would be extremely gra ...

javascriptjqueryhtmlcss

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet: <div class="ui-tabs-panel ui-tabs-hide">panel</div> <div>& ...

jquerycssfunctionevent-handling

Tips for showing a message in the modal after a user completes the registration process

This code snippet contains an HTML form for user registration. Upon clicking the register button, users are redirected to another page. However, the desired outcome is to display the message on the same modal form. <div class="popup"> ...

phpjqueryajaxhtml

Is it possible to use jQuery animation to smoothly transition the background color?

I'm currently working on a function to dynamically change the background color of a div based on an array of colors. Here's what I have so far: HTML: <div class="bg-color"> CSS: .bg-color { width: 500px; height: 500p ...

javascriptjqueryhtml

A Guide to Importing CSV Data Into a Datatable

Is there a way to efficiently import data from a CSV file and display it in a table using the datatables plugin? Currently, I have a fixed table structure: <table id="myTable" class="table table-striped" > <thead> ...

javascripthtmljquerydatatables