I have a pop up div working on click. I need to have the pop up appear in the browser where the user is looking. Right now on short pages the pop up div is no where to be found and on long pages you have to scroll way down to even see the pop up.
So far I have tried a couple different things in my popUpDiv with no luck.
margin: 30px auto 0;
top: 50%;
left: 50%;
margin-left: -155px;
margin-top: -700px;
Here is my css:
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
padding: 40px;
position:absolute;
background-color: #f3f3f3;
height:255px;
border:5px solid #000;
z-index: 9002;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
margin-left: -155px;
margin-top: -700px;
}
#popUpDiv a {position:relative; top:0px; right:10px}
/*END CSS POPUP*/
Here is what I have in my php file:
<!--POPUP-->
<script type="text/javascript" src="http://domain.com/js/css-pop.js"></script>
<div id="blanket" style="display:none;">
</div>
<div id="popUpDiv" style="display:none;">
Pop Up content Here
</div>
<!-- / POPUP-->
There's more than a few ways to do what you're trying to do in jscript, but the cadillac way to do it might be modal popups: http://www.script-tutorials.com/css3-modal-popups/ .
Position: fixed will solve your problem. Your use of position: absolute is causing all the drama.
#popUpDiv {
padding: 40px;
position:fixed;
background-color: #f3f3f3;
height:255px;
border:5px solid #000;
z-index: 9002;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
}
Related
This question already has answers here:
Double border with different color [duplicate]
(8 answers)
Closed 8 months ago.
I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically.
Now I'm facing one issue i.e. How to add two borders like this using css or any other style-sheet.
You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.
body{
background:#efefef;
}
.wrapper {
position: relative;
padding:10px;
}
.image {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}
<div class="wrapper">
<div class="image"></div>
</div>
It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.
Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.
.wrapper {
position: relative;
}
div {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
}
.first {
left: 5px;
top: 5px;
z-index: -1;
background-color: #777;
}
.second {
left: 10px;
top: 10px;
z-index: -2;
background-color: #AAA;
}
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="image"></div>
</div>
try this
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}
.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}
.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>
I am making a tooltip box which involve personal introduction text,my target is a tooltip box with Arrow is displayed if I using a mouse to hover a profile picture.........
I have tried some methods online but they are not workable ...... can anyone help me?
here is my css code for the tooltip box
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
Here is my html code example
<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To;
Hobby: Hiking, Watching movie;
I believe that it would be fun that we can carry out research study
independently. I think it is meaningful to participate and promote synthetic
biology research.
I can learn a lot and make many international friends in Boston! "></td>
Use ::before selector to make the arrow like the example
.tooltip-element {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
bottom:100%;
left:0;
}
.tooltip-element::after{
content:'';
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #161616 transparent transparent transparent;
bottom:-8px;
left:5px;
}
.tooltip{
position:relative;
}
.tooltip:hover .tooltip-element{
display:block;
}
<br><br><br><br><br><br><br>
<span class="tooltip">
<span class="tooltip-element">contnet tooltip</span>
test</span>
Basic Tooltips Image With Arrow
/* --- Tooltip || Begin --- */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltipText {
visibility: hidden;
max-width: 300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 0.5em;
position: absolute;
z-index: 1;
word-wrap: break-word;
}
.tooltip:hover .tooltipText {
visibility: visible;
}
.tooltipTextRight {
left: 110%;
top: 0px;
}
/* --- Tooltip || End --- */
/* --- Tooltip Arrow || Begin --- */
.tooltip .tooltipArrow::after {
border-width: 5px;
border-style: solid;
content: "";
position: absolute;
}
.tooltipArrowRight::after {
border-color: transparent black transparent transparent; /* right */
top: 0px;
right: 100%;
margin-top: 5px;
}
/* --- Tooltip Arrow || End --- */
img {
width: 200px;
height: 200px;
object-fit: cover;
}
<div class="tooltip">
<img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" title="Name: Ching Yuet To;" />
<span class="tooltipText tooltipTextRight tooltipArrow tooltipArrowRight">
<p>Hobby: Hiking, Watching movie;</p>
<p>I believe that it would be fun that we can carry out research study independently. I think it is meaningful to participate and promote synthetic biology research.</p>
</span>
</div>
I created this box. I want this box to open when I hover my mouse over the part that is still visible. Now when I hover my mouse nothing happens. I think the error must be the JS file. Calling the function goes okay because if put for example an
alert("test")
in the close box function everything works except the box.
HTML:
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
CSS:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
JS:
function boxclose() {
document.getElementsByClassName("box").style.bottom="0px"
}
Useful link: https://www.w3schools.com/cssref/pr_pos_bottom.asp
You're using getElementsByClassName, which returns a list instead of one element, so you just need to tell it which element to target:
document.getElementsByClassName("box")[0].style.bottom="0px"
Working example:
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
You dont need javascript there, you can do that with css, too i will add a transition, try the following:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
transition:all .8s cubic-bezier(1,.65,1,.61);
}
.box:hover {
bottom:0;
}
<div class="box">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
If i'm not wrong changing your js file like this will work,
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}
Hello If i Properly understand you then please try this.
.box-popup {padding: 5px 10px; border:1px solid #ddd; position:relative;}
.box-popup span {display: none;}
.box-popup:hover span {display: block; padding: 10px; width: 200px; height: 100px; border:1px solid #eee; position: absolute; left:0; top: 30px;}
<div class="box-popup">
Hover
<span>
Hover Data
</span>
</div>
Did any come across this buggy thingy with jquery draggable before when you add right: 0; bottom: 0; to your popup box?
The box jumps away from your cursor when you click on the handler
jquery,
$(".popup").draggable({
cursor: "move",
handle: ".popup-outer",
cancel: ".popup-inner"
});
html,
<div class="popup-outer popup">
<div class="popup-inner">
<div class="box-close">x close</div>
<div class="ajax-response"></div>
</div>
</div>
css,
.popup-outer{
position:absolute;
top:0;
left:0;
right: 0; //this causes the bug
bottom: 0; //this causes the bug
max-width: 1000px;
height:500px;
margin: auto;
padding:6px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius: 4px;
background: url(../image/trans_black.png);
}
.popup-inner {
text-align:left;
background-color:#ffffff;
margin:0px;
padding:20px;
overflow:hidden;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius: 2px;
border:0px solid #999;
color:#333333;
border:0 solid red;
cursor:default;
}
any idea how can I fix it?
I want to place the div exactly in the center whose size is changing dynamically.
<div id="containall">
<div style="display:none" align="center" id="mainDiv">
<div class="mainDiv" id="paste"></div>
<div class="midDiv" id="popup">X
<img id="bearimage2" style="visibility:hidden;">
<canvas id="tools_sketch" width="200" height="200"></canvas>
</div>
</div>
</div>
I am changing the size of canvas dynamically according to image it holds.
the css for POPUP div is like
#popup {
width:600px;
height:400px;
background:url(/BugClipper/bccss/bgtrans_bc.png);
position:absolute;
left:400px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
margin:-600px 0 0 0;
border:2px solid #333;
}
NOw when the popup size is changed to hold canvas, it goes to the right side of screen and i have to scroll to view full image on canvas.
Please guide me how to set css so that it always display on middle of screen
You can apply this CSS to the popup div:
#popup {
width: 50%;
margin: 0 auto;
}
try this css
#popup {
width:50%;
height:400px;
background:url(/BugClipper/bccss/bgtrans_bc.png);
left:400px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
margin:0 auto;
padding:0;
border:2px solid red;
}
Try this:
#popup {
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin: -200px 0 0 -300px;
position: fixed;
}
Fiddle