picture/video link opening on top of page
0
I'm VERY new to html coding (5/6 weeks) and I'm having a problem getting my head around something. I'd like to be able to click on an image and instead of opening a new page have it's image or embedded video load inside a floating page (I'm sure there is a correct name for this) that loads on top of the existing page.
I've found several examples of this (one of which is linked below) but I'm still baffled. Is it just code from the main.css I need or do I require javascript etc. aswell. I've tried copYing over several bits of css code but to no success. It seems to always open a new page and not a floating page like in the example I've included below.
example: https://html5up.net/parallelism
when you click an image in the above site it opens/pops up a floating box (again sorry for not knowing what it is called) in the way I'd love to understand. I really want to use this technique as my site will be image and video heavy. I feel this approach will be a far a more professional way to display my information and images.
If anyone can help I'd love to learn exactly what I need to do to implement this. It might only be 5/6 weeks but I feel I've learned quite a bit. I want to keep upskilling to the point that I can maintain this website entirely by myself.
Thanks to everyone in advance,
Al.
javascript html css html5
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
add a comment |
0
I'm VERY new to html coding (5/6 weeks) and I'm having a problem getting my head around something. I'd like to be able to click on an image and instead of opening a new page have it's image or embedded video load inside a floating page (I'm sure there is a correct name for this) that loads on top of the existing page.
I've found several examples of this (one of which is linked below) but I'm still baffled. Is it just code from the main.css I need or do I require javascript etc. aswell. I've tried copYing over several bits of css code but to no success. It seems to always open a new page and not a floating page like in the example I've included below.
example: https://html5up.net/parallelism
when you click an image in the above site it opens/pops up a floating box (again sorry for not knowing what it is called) in the way I'd love to understand. I really want to use this technique as my site will be image and video heavy. I feel this approach will be a far a more professional way to display my information and images.
If anyone can help I'd love to learn exactly what I need to do to implement this. It might only be 5/6 weeks but I feel I've learned quite a bit. I want to keep upskilling to the point that I can maintain this website entirely by myself.
Thanks to everyone in advance,
Al.
javascript html css html5
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
4
The name of the popup you're looking for ismodal. There's plenty of frameworks that can handle creation of those for you quite easily (such as Bootstrap), though all approaches will require JavaScript. If you don't want to import a heavy framework, Micromodal works well for me. Unfortuantely, however, your question outside of asking the name of the popup is a bit too broad, which makes it 'off-topic' for StackOverflow. For further information, please take the tour of the site :)
– Obsidian Age
Nov 28 '18 at 23:22
w3schools.com/howto/howto_js_lightbox.asp try this out
– Rachel Gallen
Nov 28 '18 at 23:50
Hey all. I adapted this to suit my needs. Thanks for everyone's help
– alter egotist
Dec 6 '18 at 19:26
add a comment |
0
0
0
I'm VERY new to html coding (5/6 weeks) and I'm having a problem getting my head around something. I'd like to be able to click on an image and instead of opening a new page have it's image or embedded video load inside a floating page (I'm sure there is a correct name for this) that loads on top of the existing page.
I've found several examples of this (one of which is linked below) but I'm still baffled. Is it just code from the main.css I need or do I require javascript etc. aswell. I've tried copYing over several bits of css code but to no success. It seems to always open a new page and not a floating page like in the example I've included below.
example: https://html5up.net/parallelism
when you click an image in the above site it opens/pops up a floating box (again sorry for not knowing what it is called) in the way I'd love to understand. I really want to use this technique as my site will be image and video heavy. I feel this approach will be a far a more professional way to display my information and images.
If anyone can help I'd love to learn exactly what I need to do to implement this. It might only be 5/6 weeks but I feel I've learned quite a bit. I want to keep upskilling to the point that I can maintain this website entirely by myself.
Thanks to everyone in advance,
Al.
javascript html css html5
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
I'm VERY new to html coding (5/6 weeks) and I'm having a problem getting my head around something. I'd like to be able to click on an image and instead of opening a new page have it's image or embedded video load inside a floating page (I'm sure there is a correct name for this) that loads on top of the existing page.
I've found several examples of this (one of which is linked below) but I'm still baffled. Is it just code from the main.css I need or do I require javascript etc. aswell. I've tried copYing over several bits of css code but to no success. It seems to always open a new page and not a floating page like in the example I've included below.
example: https://html5up.net/parallelism
when you click an image in the above site it opens/pops up a floating box (again sorry for not knowing what it is called) in the way I'd love to understand. I really want to use this technique as my site will be image and video heavy. I feel this approach will be a far a more professional way to display my information and images.
If anyone can help I'd love to learn exactly what I need to do to implement this. It might only be 5/6 weeks but I feel I've learned quite a bit. I want to keep upskilling to the point that I can maintain this website entirely by myself.
Thanks to everyone in advance,
Al.
javascript html css html5
javascript html css html5
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
asked Nov 28 '18 at 23:19
alter egotistalter egotist
1
1
4
The name of the popup you're looking for ismodal. There's plenty of frameworks that can handle creation of those for you quite easily (such as Bootstrap), though all approaches will require JavaScript. If you don't want to import a heavy framework, Micromodal works well for me. Unfortuantely, however, your question outside of asking the name of the popup is a bit too broad, which makes it 'off-topic' for StackOverflow. For further information, please take the tour of the site :)
– Obsidian Age
Nov 28 '18 at 23:22
w3schools.com/howto/howto_js_lightbox.asp try this out
– Rachel Gallen
Nov 28 '18 at 23:50
Hey all. I adapted this to suit my needs. Thanks for everyone's help
– alter egotist
Dec 6 '18 at 19:26
add a comment |
4
The name of the popup you're looking for ismodal. There's plenty of frameworks that can handle creation of those for you quite easily (such as Bootstrap), though all approaches will require JavaScript. If you don't want to import a heavy framework, Micromodal works well for me. Unfortuantely, however, your question outside of asking the name of the popup is a bit too broad, which makes it 'off-topic' for StackOverflow. For further information, please take the tour of the site :)
– Obsidian Age
Nov 28 '18 at 23:22
w3schools.com/howto/howto_js_lightbox.asp try this out
– Rachel Gallen
Nov 28 '18 at 23:50
Hey all. I adapted this to suit my needs. Thanks for everyone's help
– alter egotist
Dec 6 '18 at 19:26
4
4
The name of the popup you're looking for is
modal. There's plenty of frameworks that can handle creation of those for you quite easily (such as Bootstrap), though all approaches will require JavaScript. If you don't want to import a heavy framework, Micromodal works well for me. Unfortuantely, however, your question outside of asking the name of the popup is a bit too broad, which makes it 'off-topic' for StackOverflow. For further information, please take the tour of the site :)– Obsidian Age
Nov 28 '18 at 23:22
The name of the popup you're looking for is
modal. There's plenty of frameworks that can handle creation of those for you quite easily (such as Bootstrap), though all approaches will require JavaScript. If you don't want to import a heavy framework, Micromodal works well for me. Unfortuantely, however, your question outside of asking the name of the popup is a bit too broad, which makes it 'off-topic' for StackOverflow. For further information, please take the tour of the site :)– Obsidian Age
Nov 28 '18 at 23:22
w3schools.com/howto/howto_js_lightbox.asp try this out
– Rachel Gallen
Nov 28 '18 at 23:50
w3schools.com/howto/howto_js_lightbox.asp try this out
– Rachel Gallen
Nov 28 '18 at 23:50
Hey all. I adapted this to suit my needs. Thanks for everyone's help
– alter egotist
Dec 6 '18 at 19:26
Hey all. I adapted this to suit my needs. Thanks for everyone's help
– alter egotist
Dec 6 '18 at 19:26
add a comment |
1 Answer
1
active
oldest
votes
0
Here's instructions for a framework-based modal - Getbootstrap Modal
Below is a non-framework modal -
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.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;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">x</a>
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
thanks so much. I'll have a look those now.
– alter egotist
Nov 28 '18 at 23:39
Please be sure to mark the answer correct if it is a solution for you.
– webfrogs
Nov 28 '18 at 23:55
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53529581%2fpicture-video-link-opening-on-top-of-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Here's instructions for a framework-based modal - Getbootstrap Modal
Below is a non-framework modal -
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.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;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">x</a>
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
thanks so much. I'll have a look those now.
– alter egotist
Nov 28 '18 at 23:39
Please be sure to mark the answer correct if it is a solution for you.
– webfrogs
Nov 28 '18 at 23:55
add a comment |
0
Here's instructions for a framework-based modal - Getbootstrap Modal
Below is a non-framework modal -
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.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;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">x</a>
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
thanks so much. I'll have a look those now.
– alter egotist
Nov 28 '18 at 23:39
Please be sure to mark the answer correct if it is a solution for you.
– webfrogs
Nov 28 '18 at 23:55
add a comment |
0
0
0
Here's instructions for a framework-based modal - Getbootstrap Modal
Below is a non-framework modal -
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.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;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">x</a>
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
Here's instructions for a framework-based modal - Getbootstrap Modal
Below is a non-framework modal -
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.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;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">x</a>
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.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;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">x</a>
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 20px auto;
font-size: 25px;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 5px 10px;
position: relative;
width: 150px;
top: 50px;
background: #eee;
display: block;
text-align: center;
box-shadow: 1px 1px 1px #fff;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.button:hover {
color: #333;
background: #eeffff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0);
z-index: 99999;
-moz-transition: all 2s ease-out;
-webkit-transition: all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
display: block;
pointer-events: none;
}
.modalbg .dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-linear-gradient(#fff, #ccc);
background: -o-linear-gradient(#fff, #ccc);
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
}
.modalbg .dialog .ie7 {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000', Direction=135, Strength=3);
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10, 30, 0.8);
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
top: -20px;
-moz-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-transition-delay: 0.4s;
}
.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;
box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-webkit-box-shadow: 0 0 10px #000;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-transition-delay: 0.2s;
}
.close:hover {
background: #00d9ff;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a {
color: #333;
text-decoration: none;
}<a class="button" href="#openModal">Open Me!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">x</a>
<h2>You did it!</h2>
<p>Below is a picture.</p>
<img src="https://picsum.photos/300/150?random" style="margin: 0 auto; display: block;">
</div>
</div>answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
answered Nov 28 '18 at 23:33
webfrogswebfrogs
1,16832447
1,16832447
thanks so much. I'll have a look those now.
– alter egotist
Nov 28 '18 at 23:39
Please be sure to mark the answer correct if it is a solution for you.
– webfrogs
Nov 28 '18 at 23:55
add a comment |
thanks so much. I'll have a look those now.
– alter egotist
Nov 28 '18 at 23:39
Please be sure to mark the answer correct if it is a solution for you.
– webfrogs
Nov 28 '18 at 23:55
thanks so much. I'll have a look those now.
– alter egotist
Nov 28 '18 at 23:39
thanks so much. I'll have a look those now.
– alter egotist
Nov 28 '18 at 23:39
Please be sure to mark the answer correct if it is a solution for you.
– webfrogs
Nov 28 '18 at 23:55
Please be sure to mark the answer correct if it is a solution for you.
– webfrogs
Nov 28 '18 at 23:55
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53529581%2fpicture-video-link-opening-on-top-of-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
4
The name of the popup you're looking for is
modal. There's plenty of frameworks that can handle creation of those for you quite easily (such as Bootstrap), though all approaches will require JavaScript. If you don't want to import a heavy framework, Micromodal works well for me. Unfortuantely, however, your question outside of asking the name of the popup is a bit too broad, which makes it 'off-topic' for StackOverflow. For further information, please take the tour of the site :)– Obsidian Age
Nov 28 '18 at 23:22
w3schools.com/howto/howto_js_lightbox.asp try this out
– Rachel Gallen
Nov 28 '18 at 23:50
Hey all. I adapted this to suit my needs. Thanks for everyone's help
– alter egotist
Dec 6 '18 at 19:26