Close modal window on click/'X' button

[trevstonbury]

Good Evening,

I've created a modal windows using CSS and HTML with some code i've found online. However I'm not very proficient with CSS and need to make some changes to the window. The code is as follows and im currently building the site in Squarespace;

HTML

<label for="slide">Sliding CSS Modal</label>
<input type="checkbox" id="slide" checked />

<div class="overlay">
 <h2>MODAL HEADER</h2>
 <p>THIS NOW ACTS LIKE A MODAL WINDOW</p>
 </div>

CSS

style>
/* ----- MODAL WINDOW ----- */
* {
 margin: 0;
 padding: 0;
}

.container {
 width: 960px;
 margin: 50px auto;
 position: relative;
 padding: 20px;
}
.overlay {
 position: absolute;
 top: 50px;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 padding: 20px;
 width: 100%;
 height: 400px;
 border-radius: 0px;
 font-size: 20px;
 color: #fff;
 background: #000;
 z-index: 10;
 -webkit-box-shadow: 3px 3px 3px #000000;
 box-shadow: 3px 3px 3px #000000;
 -webkit-transition: top 500ms cubic-bezier(0.68, 0, 0.265, 1);
 /* older webkit */
 -webkit-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
 -moz-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
 -o-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
 transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
 /* easeInOutBack */
}
.overlay h2 {
 font-size: 20px;
 margin-bottom: 5px;
}
#slide {
 visibility: hidden; 
}
label[for=slide] {
 padding: 0px;
 cursor: pointer;
 color: #c4c4c4;
 background: transparent;
}
input#slide {
 position: absolute;
 top: -20px;
}
input#slide:checked + .overlay {
 visibility: hidden;
 top: -20px;
}

</style>

What I would like to do is set it so that when you click away from the popup window it closes the modal. Also id like to be able to put an 'X' in the top right hand corner as an optional way to close the window. Does anyone know the code for these? Any help would be much appreciated!


Kind regards

Trevor

[edited by: not2easy at 2:59 pm (utc) on Jan 20, 2016]
[edit reason] snipped URL per TOS [/edit]

[Fotiman]

When you start talking about "click", you're really talking about "behavior", which is the realm of JavaScript, not CSS. The high level answer would be that you have an event listener looking for the click event on your "X" target, which then changes presentation layer (CSS) to hide the dialog (for example, setting display: none; on the overlay).

[oligalma]

As @fotiman said, you need javascript to do this. But you could use jQuery if you wish. Here you have a good jQuery tutorial so that you can learn: [w3schools.com...]