Close Modal using CSS only

Question

I need to close my modal just by using css like this: http://jsfiddle.net/raving/1mhsynmw/

However, I can't get it to work. My modal below.

function alert(msg) {
 document.getElementById("alert").innerHTML = '<div class="modal-overlay"><div class="modal"><div class="modal-container"><h3>' + msg + '</h3><p>' + msg + '</p></div><p class="modal-footer"><a href="javascript:" id="ok">OK</a></p></div>';
}

alert("This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal. This is some text to show you this modal.");

body {
  font-family:arial;
  font-size:11px;
}
.modal {
     position: fixed;
     top: 20px;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
     width: 200px;
     box-shadow: 0 4px 6px 1px rgba(50, 50, 50, 0.14);
     background: #fff;
}
.modal p {
  cursor:default;
}
.modal-container {
  padding: 10px;
}
.modal p a {
  color:#555;
}
.modal-footer a {
  display:block;
  border:1px solid #eee;
  width:9.5%;
  padding:3px;
  background:#fff;
  text-decoration:none;
  float:right;
}
.modal-footer {
     background: #fafafa;
     border-top: 1px solid #eee;
     margin-bottom: 0px;
  margin-top:0px;
  padding:8px;
  height:25px;
}
.modal h3 {
  margin:0px;
  white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 175px;
}
.modal-last {
  padding-bottom:0px;
}
.modal-overlay:before {
     content: '';
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
}

<div id="alert"></div>

<h3>Content..</h3>
<p>Just to show it's a modal</p>

QUESTION: Is there any way to close the modal without using Javascript? And it that is not possible, how can I use Javascript to close this modal?

none of your styles use the `:target` pseudo-selector and your modal does not have any `id="my_id"` attribute which would be used in ` — Aprillion, Feb 05 '16 at 17:56
@Aprillion Problem is that it doesn't need to be triggered by clicking a link, it needs to be triggered by loading the page. This might not work by using CSS I guess... — Mia, Feb 05 '16 at 17:58
Get rid of your javascript completely and use > https://drublic.github.io/css-modal/#! — fauverism, Feb 05 '16 at 18:39

Larry Lane · Accepted Answer · 2016-02-05T20:24:06.373

4

If you don't want to use JQuery to close the modal when you click on the ok button you could do something similar to the following code with plain JavaScript. You will have to assign an index to the selector to get it to work.

    //begin click event
    document.getElementById("ok").addEventListener("click",function(event){


    /* Hide the element with a class name of modal.
       note:If there is more than one element with the class name
       modal then this code will only select the first one in the
       collection of elements 
    */

    document.getElementsByClassName("modal")[0].style.display = "none";


       });//end click event

edited Feb 05 '16 at 20:24

answered Feb 05 '16 at 17:58

Larry Lane

2,141
1
12
18

Thank you for your answer, for some reason nothing happens when I click the event, even though they're in the same file.. – Mia Feb 05 '16 at 18:06
@larry Lane, `.modal` is a class selector, not ID – Joe Kdw Feb 05 '16 at 18:11
@HermanNz Noticed that and changed it in my code to `getElementByClassName`, that wasn't the problem. – Mia Feb 05 '16 at 18:18
The problem has been solved by the use of your code, thank you. – Mia Feb 05 '16 at 19:15
I am glad I could help. Keep in mind that the code will only work if you have only 1 element with the modal class on your page. – Larry Lane Feb 05 '16 at 19:17

slinhart · Answer 2 · 2016-02-05T18:20:33.613

I don't believe there is a css only way to close/hide the modal upon clicking the OK button. However, it should be very easy to close with plain Javascript. Depending on whether you want to hide the modal (but keep it in the DOM), or actually remove the modal elements you could implement it like this.

 // To hide, run this inside a click callback
 document.getElementById('modal').classList.push('hide');

 .hide {
   display: hidden;
 }



 // And to remove
 var modal = document.getElementById('modal');
 modal.parentNode.removeChild(modal);

Also you would have to add a #modal id to your modal, instead of just a class (unless you want to use document.getElementsByClassName)

score 1 · Answer 3 · answered Feb 05 '16 at 17:57

Based on your js code, you are injecting modal elements into the dom document.getElementById("alert").innerHTML = 'modal stuff' if you want to get rid of it, the most simplest way, use an empty string like this: document.getElementById("alert").innerHTML = ''

CSS way would be something like display: none.

The proper way you should close it, by invoking javascript close function, which would remove modal and clean up after itself (so old code is not there anymore). This method depends on the types of modals and what you want to achieve.

score 0 · Answer 4 · answered Jun 16 '23 at 09:11

I would personally go with using javascript, but for the sake of completeness here's a way to do it with CSS only by using a checkbox and the :checked pseudo-class.

In this example I'm using the has selector which doesn't seem to have a great browser support at the moment. But I believe there should be other ways to workaround it (using wrapper DIVs, sibling selectors, etc).

.modal {
    position: absolute;
    background: grey;
    width: 50%;
    height: 50%;
}

.modal:has(.btn-close:checked) {
    display: none;
}

.btn-close {
    -webkit-appearance: none;
    appearance: none;
}

<div class="modal">
    <input id="close-button" type="checkbox" class="btn-close">
    <label for="close-button">X</label>
    <p>My modal content</p>
</div>

Close Modal using CSS only

4 Answers4

Linked