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?

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