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?

Artificial

What would make the modal close and at what point? – Checkrein

@Checkrein The modal should close when they click OK. – Artificial

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 <a href="#my_id" link... how exactly are you trying to make it just like that jsfiddle plz? – Essay

@Essay 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... – Artificial

Get rid of your javascript completely and use > drublic.github.io/css-modal/#! – Tess

Answer 1

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

Clout

Thank you for your answer, for some reason nothing happens when I click the event, even though they're in the same file.. – Artificial

@larry Lane, .modal is a class selector, not ID – Usm

@HermanNz Noticed that and changed it in my code to getElementByClassName, that wasn't the problem. – Artificial

The problem has been solved by the use of your code, thank you. – Artificial

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. – Clout

Answer 2

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)

Eckstein

Answer 3

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.

Normative

Answer 4

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>

Geriatrician