On the page http://canadianwhoswho.ca/order-subscribeonline.php I have created a modal window that opens when users click http://canadianwhoswho.ca/order-subscribeonline.php#openModal. This works perfectly in Firefox, but not in IE or Chrome. Instead, it just adds the modal text to the top of the page.
Here is the CSS:
.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: #E4E4E4;
background: -moz-linear-gradient(#E4E4E4, #F6F6F6);
background: -webkit-linear-gradient(#E4E4E4, #F6F6F6);
background: -o-linear-gradient(#E4E4E4, #F6F6F6);
}
.close {
background: #E4E4E4;
color: #922211 !important;
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: #922211;
color: #E4E4E4 !important;
}
And the HTML:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Thank you for your interest in <em>Canadian Who's Who</em></h2>
<p>To place an order, please contact us at info#canadianwhoswho.ca, or call 705-325-5552.</p>
</div>
Choose</p>
i found similar answer on http://cameronbaney.com/2012/07/26/pure-html5css3-responsive-modal-window/
I have tried it and works for all three IE, Chrome and Firefox.
Hope it helps.
Related
I wanted to display a modal window on clicking on the buttons by using only css.
So far everything works but expect one thing. When i click anywhere out side the modal window, i need to close the modal box which is not happenig now. Is there any way we can do it only using css ? Please help
.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;
}
<div class="cta-module bottom-divider">
<h2>Looking for Health EFPPOS Solutions?</h2>
<div class="cta-wrapper">
<p>Our mobile EFTPOS facilities are convenient, portable and secure</p>
<p><a class="button_primary" href="#openModal">Apply</a></p>
<p><a class="button_secondary" href="#openModal">Learn more</a></p>
</div>
</div>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created</p>
<p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
</div>
</div>
Unresponsive Modal Dialog, without using Media queries or JS is what the goal (was) is. Can be done - but I have since lost the code to update the question.
You can see it on this Fiddle:
https://jsfiddle.net/4qkonfLk/
Code:
.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);
}
.close2 {
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;
}
.close2:hover {
background: #00d9ff;
}
Other Information
<div id="openModal" class="modalDialog">
<div> X
</div>
</div>
Any Suggestions on how to fix this? Thanks!
You can specify mobile-only CSS by using media queries, media queries applies CSS rules only in specific conditions such as a width range, for more see the following article.
In your case you can target mobiles width (which is usually 360px) as the max-width of your media query as following:
.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);
}
.close2 {
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;
}
.close2:hover {
background: #00d9ff;
}
#media (max-width: 360px) {
.modalDialog > div {
width: 300px;
}
}
Other Information
<div id="openModal" class="modalDialog">
<div> X
</div>
</div>
You want to use #media queries to create alternative renderings.
Like:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
rynave's answer here lists many good common ones; I think it is common to have 2-4 for:
pc/tablet, phone
phone, tablet, pc
phone, tablet, pc, hi res
Or
watch app, phone, tablet, pc
Not sure his iPhone one is so useful any more.
I ended up using some custom CSS classes based on the screensize (Media Queries)to use something different for smaller screens - I ended up scrapping the entire thing after though, so this question is pretty much irrelevant to anything in the community, since I couldn't delete it, I am editing my answers to help understand what I was talking about.
so I have a modal on my site and it opens fine and everything but there is one problem ... it opens for a second then closes on page load. How can I fix this? It is powered by CSS and not JavaScript. The button you press to open the modal is included in my navigation bar.
Modal HTML:
<div id="JoinUs" data-toggle="modal" class="modalDialog">
<div>
X
<h4>Join Us!</h4>
<input type="text" id="fieldUser" class="input" required pattern=.*\S.* />
<label for="fieldUser" class="label">Username</label>
<input type="password" id="fieldPassword" class="input" required pattern=.*\S.* />
<label for="fieldPassword" class="label">Password</label>
<button class="btn">Login</button>
</div>
</div>
Modal CSS:
.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-color: #fff;
}
.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: #2ecc71; }
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
I am trying to embed a youtube code inside a popup box when the user clicks a link like this:
However another user is having a problem on Firefox when the video is not even embed in the popup:
The user is having the problem in Firefox but when I tested it in Firefox everything was OK.
Is there something in the settings of Firefox that he has and I don't?
Here is the code:
<!DOCTYPE html>
<head>
<title>Creating a modal window with HTML5 & CSS3</title>
<style>
.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: 560px;
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; }
h2
{
text-align:center;
}
</style>
</head>
<body>
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Youtube Video</h2>
<iframe width="560" height="315" src="http://www.youtube.com/embed/98H2x9BjUxE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
I have done a jsFiddle to solve this http://jsfiddle.net/sMpcL/1/
I've added the following: -
.modalDialog { display: none; }
.modalDialog:target { display: block; }
It's working for me in Chrome and Firefox