I am trying to create a overlay to display a internal html page. I started with dynamic DHTML modalbox but the code was outdated for HTML5 browsers(didn't show properly for MS Edge). I found something called LightBox, but it only look like it display images.
Modal Window: http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm
LightBox: http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528
All I want is a jquery overlay page that shows internal webpages. Any help?
This should get you started...
in your style section add:
.overlay-background {
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content
{
display: block;
background: #fff;
padding: 1%;
width: 40%;
position: absolute;
top: 15%;
left: 50%;
margin: 0 0 0 -20%;
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
in your HTML section add but remember to change the URL to whatever page you want shown:
<div class="overlay-content">
<object type="text/html" data="https://www.google.com" style="width: 50%; height: 50%;"></object>
</div>
<div class="overlay-background">
</div>
Related
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I have on my website some lightboxes and now I can scroll them only when my pointer is inside the box.
How can I scroll them outside the box, like when you open a comment on Trello or on Pinterest?
Here is my code:
//Declare vars
var $lightboxAnchor = $("a.list_message");
//Lightbox
$(".overlay-background").hide();
//Lightbox functions from leistungen
$lightboxAnchor.click(function() {
var $attr = $(this).attr("href").replace("#", "");
console.log($attr);
$('div[id=' + $attr + ']').show();
$("body").addClass("noscroll");
});
$(".overlay-background").click(function() {
console.log('alert');
$(this).hide();
$("body").removeClass("noscroll");
});
$(".close_lightbox").click(function() {
console.log('alert');
$(".overlay-background").hide();
$("body").removeClass("noscroll");
});
.overlay-background {
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content
{
display: block;
background: #fff;
padding: 1%;
width: 70%;
height:70%;
position: absolute;
top: 15%;
left: 10%;
margin: 0;
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
<div class="overlay-background">
<div class="overlay-content">
<object type="text/html" data="https://en.wikipedia.org/wiki/Dentist" style="width: 100%; height: 100%;" </object>
</div>
</div>
I`ve made this JSFiddle as a representation: jsfiddle.net/9mesun50 As you can see the lightbox can be scrolled only inside it. If I have the pointer outside the lightbox I can scroll it.
Thank you for help!
I am trying to centre a DIV (form) based on the presently viewable browser space, and one that takes into account how far up or down a page I have scrolled. I would like the form centred as and when I press a button. My attempt is below. The problem with my attempt is that if I have scrolled down a page far enough for instance, the form is not entered, but is centred if I scroll all the way up the page again.
If I have scrolled down the page, and want the form to appear, the first image shows what i get.
If I am at the top of the page, then the form is properly centred.
PS:- No jQuery solutions please
CSS for div #docForm
#docForm {
font-family: sans-serif;
border: 1px solid #ccc;
width: 600px;
padding: 10px;
height: 425px;
transform: translate3d(-50%, -50%, 0);
z-index: 10000;
position: absolute;
background-color: white;
top: 50%;
bottom: 0;
left: 50%;
right: 0;
border-radius: 10px;
box-shadow: 3px 3px 3px #b8b8b8;
color: #484848;
}
#docForm {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
or if you want to use flex, create a div with class formContainer, put your form inside of it and then:
.formContainer {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
Since you have a fixed width and height, you can do this by setting the left and top to the center of the screen, then offsetting the container by half of it's width and height:
#docForm {
width: 600px;
height: 425px;
border: 1px solid #ccc;
padding: 10px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -311px /* -(width + padding*2 + border_width*2) / 2) */
margin-top: -223px /* -(height + padding*2 + border_width*2) / 2) */
}
All settings not relevant to the solution omitted in this answer, however note that you must not set right or bottom, or you will get unintended results.
In contrast to using flexbox or translate, this will be compatible with browsers that don't support CSS Level 3.
As the title suggests I want to simulate a browser (or a windowed program) through a modal popup window on my site. It doesn't need to be draggable or resizable, I'm just having trouble making this "frame" around the popup window so you scroll the content and the top (with the closing "X" icon and the "program"-name) doesn't get scrolled as well.
Any suggestions how I could achieve this?
If I understand correctly, you want to show a popup containing a scrollable frame with a close button and title section doesn't scroll?
You can create the popup using the html and css here (working example). You can easily change the iframe to a normal content div if you want.
html code
<div id="popup" style="display:none;">
<div class="overlay"></div>
<div class="box">
<div class="close">x</div>
<div class="frame">
<div class="title">Title</div>
<iframe src="http://doc.jsfiddle.net/"></iframe>
</div>
</div>
</div>
css code
/* full screen dark overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
/* full screen popup */
.box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* round black close button */
.close {
/* at the top right */
position: absolute;
top: 30px;
right: 30px;
z-index: 102;
/* in front of the frame */
/* round black */
width: 20px;
height: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background-color: #000;
color:#fff;
cursor: pointer;
text-align:center;
}
/* contains the title and frame */
.frame {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
z-index: 100;
}
/* The title */
.frame .title {
background-color: #fff;
padding:10px;
}
/* The iframe for your content */
.frame iframe {
width: 100%;
height: 400px;
border: none;
}
Advanced options
If you need more advanced options such as no scrolling of the background body, non full screen popup, center etc, you can checkout popup plugins. You can check my jquery plugin GenericBox for example code or there are a bunch of other plugins available for other options.
I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.
Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });
You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}
Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});
Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )