Welcome to WebmasterWorld Guest from 3.226.251.81

Forum Moderators: not2easy

Message Too Old, No Replies

Close modal window on click/'X' button

     
1:44 pm on Jan 20, 2016 (gmt 0)

New User

joined:Jan 20, 2016
posts: 1
votes: 0


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]

4:20 pm on Jan 20, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5021
votes: 26


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).
8:53 pm on Feb 14, 2016 (gmt 0)

New User

joined:Feb 14, 2016
posts:18
votes: 0


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...]