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
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>
I have a little problem that I find easy to solve, I however do not have enough knowledge to solve it. I've already read some questions here but apparently none seems to solve my problem (I'm pretty sure I'm doing something wrong, hehe)
When I close the modal I want my video that is playing to stop playing
HTML:
Open Modal:
<center>
<a href="#openTrailer">
<img src="IMAGE LINK">
</center>
Modal:
<div id="openTrailer" class="boxTrailer">
<div>X
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/sY1S34973zA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS:
.boxTrailer {
overflow: auto;
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:#fff;
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;
}
.player {
overflow: auto;
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:#fff;
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;
}
.boxTrailer:target {
opacity:1;
pointer-events: auto;
}
.player:target {
opacity:1;
pointer-events: auto;
}
.boxTrailer > div {
width: 600px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 7px;
background-color: black;
}
.player > div {
width: 600px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 7px;
background: #000;
background: -moz-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: 10px;
text-align: center;
top: -20px;
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;
}
Can you paste what you have onto JSFiddle, because even though the CSS is in a sense useful, its more useful when used in something like JSFiddle as an example. Otherwise its kinda pointless to post that with your HTML on here with what you're asking.
Maybe something like the following in your HTML file might work for you?
<div id="link"><img src="IMAGE LINK" style="cursor:pointer"></div>
<div id="openTrailer" class="boxTrailer"><div>
X
<iframe id="player" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div></div>
And on the same page at the bottom somewhere add:
<script>
$('#link').click(function () {
var src = 'https://www.youtube.com/embed/sY1S34973zA';
$('#openTrailer iframe').attr('src', src);
});
$('#openTrailer').on($('#close').click(function () {
$('#openTrailer iframe').removeAttr('src');
}));
</script>
This is to give you a idea of what you could do. So either this or something similar to that should work for you. That is because it might need a bit more refining.
I have a Bootstrap version that works, but for the code above I took out the content referring to Bootstrap.
If you do happen to use Bootstrap, I could just give you the code that does what you're asking.
Though another way to do it might be:
X
and
<script>
$('#close').click(function(){$('#openTrailer iframe').removeAttr('src', src);});
</script>
Whenever I open the modal it appears perfectly fine, but when I click on number "2", which is the second photo in the gallery inside the modal, it closes. How do I choose 2 (or any other number) without closing the modal?
This is my code:
/* SLIDER CSS */
#images {
width: 400px;
height: 250px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
/* 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: -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;
}
See more
<div id="openJunior" class="modalDialog">
<div>
X
<div id="images">
<img id="image1" src="http://lorempixel.com/400/250/people" />
<img id="image2" src="http://lorempixel.com/400/250/sports" />
<img id="image3" src="http://lorempixel.com/400/250/nature" />
<img id="image4" src="http://lorempixel.com/400/250/abstract" />
<img id="image5" src="http://lorempixel.com/400/250/animals" />
</div>
<div id="slider">
1
2
3
4
5
</div>
</div>
</div>
You can try using event.stopPropagation, for example like this:
$('.modalDialog').on('click', function(event){
event.stopPropagation();
});
jQuery API stopPropagation
For further comments you should consider adding the javascript you are using to your post.
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
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.