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.
Related
I am creating a website and would like a user to be able to hover their mouse over an image and get more information about the image. I have this working correctly but I cannot figure out how to darken the other images that are not selected. Ideally I would like to create an overlay div using html and css that exactly matches the dimensions of a responsive image. When not hovered over this overlay div would use a transparent color to darken the image a bit. How can I make this div responsive to the image?
Here is my codepen to see what I am talking about
https://codepen.io/klaurtar/pen/NJgrOR
.overlay {
width: 55%;
position: absolute;
background-color: rgba(0, 0, 0, .5);
z-index: 10;
&--p1 {
left: 0;
top: -2rem;
height: 20rem;
}
&--p2 {
right: 0;
top: 2rem;
height: 20rem;
}
&--p3 {
left: 20%;
top: 10rem;
height: 22rem;
}
}
.wrapper {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
background-color: #000;
opacity:0.8;
}
<div class="wrapper">
<img src="https://unsplash.it/320/240" />
<div class="overlay"></div>
</div>
I need to make a lightbox for pictures on this portfolio website. I have everything hooked up so the image goes to the original size when being clicked on, like a simple lightbox. But the problem I'm having is that the background behind the modal only goes down to the bottom of the viewport instead of going all the way to the bottom of the page. Let me know if theres any additional information I can provide.
Lightbox Problem
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
border-radius: 4px solid white;
margin-top: 10%;
}
#overlay p {
color: white;
}
Change position to fixed like this:
#overlay {
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
text-align: center;
}
I have a map section with html as follows,
<div id="map-section" class="map-section">
<!-- map opener -->
<div id="map-opener" class="map-mask" style="opacity:0.5;">
<div class="map-opener">
<div class="font-second">locate us on the map<i class="ci-icon-uniE930"></i></div>
<div class="font-second">close the map<i class="ci-icon-uniE92F"></i></div>
</div>
</div>
<!--/ End map opener -->
<div id="map-container">
</div>
</div>
<!--/ End Map Section -->
and the css was,
.map-section {
height: 150px;
overflow: hidden;
position: relative;
-webkit-transition: height 0.2s ease-out;
transition: height 0.2s ease-out;
}
.map-mask {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
cursor: pointer;
z-index: 4;
}
.map-mask .row {
position: relative;
}
.map-mask .row > div {
position: relative;
top: 50%;
}
.map-opener {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -200px;
width: 400px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-align: center;
font-weight: 400;
}
.map-opener div {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}
.map-opener div:first-child {
opacity: 1;
}
.map-opener div:nth-child(2) {
margin-top: -50px;
opacity: 0;
}
.map-opener i {
font-size: 28px;
vertical-align: middle;
}
.map-opener i:before {
display: inline;
}
.map-opened {
height: 450px;
}
.map-opened .map-mask {
height: 100px;
}
.map-opened .map-opener div:first-child {
opacity: 0;
}
.map-opened .map-opener div:nth-child(2) {
opacity: 1;
}
But this html won't give you full description about my problem and hence i am explaining here regarding it..
In a website i am using a map section in which at initial stage i have map with height of 150px; , and a text named "Locate us on map".. When we click the text, the map with a height of 450px; gets opened, here comes the issue the opened map was not scrolling down to full height and there is a need of manual scroll down to look at the full map.. How could i do it (i.e, if we click on "Locate us on map", the map container should move to full height without manual scroll down"..
The link of the site was http://dev.seyali.com/seyalitechv3/ and look at the footer of this site..
This link will clears you my issue..
Your div height of the map is changing and thus changing the height of the window but the window scroll position is not changing, you need to scroll the window on change of the div height.
To scroll the window you can add a click listener to the map mask as shown below and animate to the bottom of the page usng jQuery.
Add this JS code to your javascript file.
$('.map-mask').on('click',function(){
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
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>
I have following div which i am showing as popup:
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;
display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;
padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
When its shown, i can easily view other part of screen in the main background.
Its viewing as below:
(Entry updated sucessfully is popup div above)
I dont want to show background screen when poup is there.
I want to make it black..
How can i make it black??
I tried with setting opacity to 0.75 ... but that prooved misconceptual...did not solved my purpose..
What can i do for it???
Please help me.
Here you go!
Here's the HTML code:
<div id="overlay">
<div id="pop-up">
Content in Pop-up.
</div>
</div>
And here's the CSS code:
#overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #000000;
display: none;
}
#pop-up {
background-color: white;
border: 2px solid black;
display: block;
width: 350px;
z-index: 1001;
top: 60px;
left: 240px;
position: fixed;
padding-left: 10px;
margin: auto;
}
Hope this helps!
Here is what I would do:
Create a fixed div with 100% width and height;
put the popup div inside this fixed overlay and center it horizontally and vertically.
<div class="overlay">
<div class="popup">
Whatever code!!
</div>
</div>
css
.overlay{
position:fixed;
z-index:999;
width:100%;
height:100%;
background-color: black;
background-color:rgba(0,0,0,.75)
}
.popup{
width:300px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
}
Update 2020:
I would use 100vh and 100vw as it is widely supported. Centering the popup would be done with CSS Grid Layout and aligning the box to center.
.overlay{
position:fixed;
z-index:999;
width:100vw;
height:100vh;
background-color: black;
background-color:rgba(0,0,0,.75)
}
Here's a FIDDLE
if($('#divOperationMessage').length > 0 && $('.mask').length < 1) {
$('body').append('<span class="mask"></span>');
}
.mask {
background: rgba(0,0,0,0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You need to add an overlay div to place over the main content, and below the popup div.
div.overlay {
position: fixed;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
background-color: rgba(0,0,0,.75); /*this sets the slightly see-through black*/
z-index: 100; /*Make this less than the existing popup div*/
}
Try this
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
<div class = 'black_bg' style = "position:fixed;width:100%;height:100%;opacity:0.75;background-color:#000"></div>
And whenever you are showing the popup , add this line
$('.black_bg').show();
If you wanna use jquery,you can use jquery modal feature.
Easy to use!
Check here :
http://jqueryui.com/dialog/#modal
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
In this,if you click on the button,or outside of the popup menu,it closes.
You don't have to code down that too.
Short and compacT!