Ok I have not started to code my form yet I know how to build and what code I'm using
My question is,after the user has hit the submit button how can I make a pop up box appear that says for example your request has been submitted etc.etc...and they hit ok and it takes them back to the home page
HTML
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
CSS
body {
font-family: Arial, sans-serif;
background: url(4.jpg);
background-size: cover;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: orange;
margin: 100px 0;
}
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: orange;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
https://jsfiddle.net/kzgjr6so/
The easiest way to add action events to a webpage is by using Javascript, a programming language not to be confused with Java. The code below does not take users back to the "home page", but it does show you the general layout of an .html file, and how to use a JavaScript function to make a confirm popup box. A good place to learn more about web design and coding in general is https://www.codecademy.com/.
<html>
<head>
<title></title>
<script language="JavaScript">
function confirmBox(){
var yes= confirm("Would you like to proceed to home page")
if(yes == true){
// perform some function like taking the user to another page
}
}
</script>
</head>
<body>
<p>Stackoverflow Answer</p>
<button onclick="confirmBox();" class="Button"> Submit </button>
</body>
</html>
Related
Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
I'm trying to reproduce the popup in this page. However, when I add this code to my page nothing shows up. If I start looking at the CSS file within Adobe Dreamweaver, there are many errors in the CSS file. I suspect that's the reason the popup is not showing when I load the page. Attached is an image with some of the issues. In line 860 it's expecting an RBRACE. At line 869 the error is "unexpected token &". At line 873 it's unexpected token }. The same errors appear later on. When I analysed the code in codepen.io there were no issues, so I don't understand where the problem is.
This is the code I have so far:
In the html file:
<div id="popup1" class="overlay">
<div class="popup">
<h2>Info box</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>This is done totally without JavaScript. Just HTML and CSS.</p>
</div>
</div>
</div>
then later in the same html file:
<script>
$(window).load(function () {
$('.overlay').show();
$('.popup').show();
});
</script>
In the CSS file:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
&.light {
background: rgba(255,255,255,0.5);
}
.cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
&:target {
visibility: visible;
opacity: 1;
}
}
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
position: relative;
.light & {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
&:hover {
opacity: 1;
}
}
.content {
max-height: 400px;
overflow: auto;
}
p {
margin: 0 0 1em;
&:last-child {
margin: 0;
}
}
}
Try changing the visibility:hidden to display:none and also why don't you just hide everything in the .overlay class and use the show() method to display the content in the javascript
Firstly, The codepen is using SCSS which is transformed to CSS and then it works. So, if you directly use that as CSS, it won't work and give errors. You need some pre-processor to process the SCSS to CSS and then use it.
e.g.
This is SCSS syntax (in codepen)
overlay {
background: red;
opacity: 0;
&:target {
opacity: 1;
}
}
which gets converted to the following CSS (and is actually getting used)
overlay {
background: red;
opacity: 0;
}
overlay:target {
opacity: 1;
}
So, you cannot use the former directly in your html without processing.
Secondly, the way codepen is working is by using a href's internal linking attribute. You create an internal link by href and then when the user clicks on the link, target attribute is added to the overlay class overriding the previously written CSS.
Have tried to partially fix it for you:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
/* Have fixed the CSS till here and so basic example is working fine now */
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
.light & {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
&:hover {
opacity: 1;
}
}
.content {
max-height: 400px;
overflow: auto;
}
p {
margin: 0 0 1em;
&:last-child {
margin: 0;
}
}
}
Click Me
<div id="popup1" class="overlay">
<div class="popup">
<h2>Info box</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>This is done totally without JavaScript. Just HTML and CSS.</p>
</div>
</div>
</div>
You can also achieve the same using javascript but that need code other than what you have written.
Hope it helps. Revert for any doubts!
I found this modal http://codepen.io/imprakash/pen/GgNMXO pure html and css no js. It's all great and all but how can I make it trigger without using a button or link? I want it to pop up to welcome visitors once the website load.
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
i modified your codepen
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:not(:target) {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#popup1">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
You could make it with animations. A quick example:
#popup1 {
animation-name: welcome;
animation-duration: 2s;
}
#keyframes welcome {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="popup1" class="overlay">Hey!</div>
As the technique uses :target psuedo class, you can directly target with appending the id of that pop up element.
Try this, http://codepen.io/imprakash/pen/GgNMXO#popup1
Just appended #popup1 to target. Thus as soon as you open, popup will be targeted and opened.
I have a link that will show a popup once clicked.
<a class="button" href="#popup1"><span id="contactspan"></span></a>
When the link is clicked an overlay shows up together with a popup .
DIV
<div id="popup1" class="overlay">
<div class="popup">
<h2>Contact</h2>
<a class="close" href="#">×</a>
<div class="content">
Stuff in popup.
</div>
</div>
</div>
CSS
.box {
width: 50%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
transition: all 0.3s ease-out;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 50%;
height: 50%;
position: relative;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .content {
max-height: 100%;
overflow: auto;
}
My problem is that when the popup is visible, I can still click through the overlay and hit other links in my div container.
Is there a way to set "pointer-events: none;" to be applied to div id="container" as long as my popup is visible?
This is called event bubbling, see
What is event bubbling and capturing?
You need to use:
e.stopPropagation();
In your JavaScript at the top of your event handler.
I started learning playing with HTML and CSS.
I have something in mind, and I know this is possible with the help of JavaScript.
But I want to know if its possible just with CSS.
here is my image:
<img id="picturegoeshere" src="picture.png" width="100" height="90">
here is the CSS part:
.picturegoeshere:hover
{
transform:scale(2,2);
transform-origin:0 0;
}
Is their a way to click the image, then pop up ? "hover" works but I want the 'popup' to stay. Because after this part works, but I want to add information about the image (hyperlinks or something else).
I found .picturegoeshere:active but that only makes it bigger while the mouse click is still down..
I'm sure many people have asked the same question, but I cant seem to find their questions, I must be searching the wrong questions because I don't know the terminology for CSS yet I guess?
No did not like that you are doing ...
If you want with this css only then do this ...
as you know you can use focus instead of click it !right! (both mean same).
just create that pop up menu on screen and hide it and then use css like this
#image1:focus #popupmenu{
display:initial;
}
what you need :::
1. Just show image on the screen first.
Show the popup menu by using position:fixed;
And then hide your menu.
After hide use
#image1:focus #popupmenu{ display:initial; }
This create a popup menu for you.
Use same method for close button and for thumb changing
<a href="#openModal">
<img src="http://www.cssscript.com/wp-content/themes/iconic-one/img/twitter.png" alt="Follow us on Twitter"></a>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
I think you are looking for this:
body {
font-family: Arial, sans-serif;
background: url(4.jpg);
background-size: cover;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: orange;
margin: 100px 0;
}
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
background: orange;
}
.button:hover {
background: orange;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
Check this site:-
http://www.sevensignature.com/blog/code/pure-css-popup-without-javascript
http://meyerweb.com/eric/css/edge/popups/demo.html