CODEWITHSUNDEEP
javascripthtmlcssmodal-dialog
Mia
Mia

Reputation: 947

Close Modal using CSS only

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?

Upvotes: 7

Views: 10651

Answers (4)

Seba
Seba

Reputation: 612

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>

Upvotes: 0

Larry Lane
Larry Lane

Reputation: 2191

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

Upvotes: 6

slinhart
slinhart

Reputation: 572

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)

Upvotes: 2

Tatarin
Tatarin

Reputation: 1298

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.

Upvotes: 1

Related Questions