[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1696
  • Last Modified:

How to get going with a nice div popup box

Hello,

I want to make a classy CSS popup box that looks as nice as a regular popup or better. I've got the following, I just don't know how to use it:

<style>

.NewDiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal; font-size: 8.5pt; text-align: left;
border-left: ##FFFFFF 1px solid; border-right: ##DDDDDD 1px solid;
border-bottom: ##DDDDDD 1px solid;
}
</style>

then in the body:

<div class="NewDiv">

Please assist me with this or another div popup.

bob
0
weikelbob
Asked:
weikelbob
  • 6
  • 4
1 Solution
 
GrandSchtroumpfCommented:
What you have is definitely not enough to make a popup.
You can use this code, it's the only pure CSS tooltip i know and it has its limits:
It does not shift left when the link is close to the right side of the window, so part of the popup might be invisible.
Also, it overwites the "display" of the span, leading to "improper" nesting of a "block" element inside an "inline" element (but that should not be a major problem since browsers support that quite well).
So here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<style type="text/css">
a.tooltip {
     position: relative;
     z-index: 1;
}
a.tooltip:hover {
     z-index: 2;
     padding: 0;
}
a.tooltip span.tooltip {
     display: none;
}
a.tooltip:hover span.tooltip {
     display: block;
     position: absolute;
     top: 2em;
     left: 2em;
     width: 15em;
     border: 1px solid #666;
     background-color: #EE7;
     padding: 0.5em;
     color: black;
     text-decoration: none;
}
</style>
</head>
<body>

<div>
Lorem (<a class="tooltip" href="javascript:void(0);">Note<span class="tooltip"> Good practice but can sometimes limit possbilities.</span></a>) Ipsum
</div>

</body>
</html>
0
 
weikelbobAuthor Commented:
Sorry for the confusion. I need a popup box in the top left-hand corner of the screen that stays no matter where I move my mouse. I need it classy. Also, it needs to be scrollable since it's going to have quite a bit of text in it.

I'm new to CSS, please walk me through this.

Bob
0
 
GrandSchtroumpfCommented:
> that stays no matter where I move my mouse
That cannot be acheived with CSS only.  You need javascript for that.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
GrandSchtroumpfCommented:
Here is a version that uses javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<style type="text/css">

div.PopUp {
  display: none;
  width: 15em;
  height: 15em;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  border: 1px solid black;
}

</style>
<script type="text/javascript">

function popup_show(id) {
  elem = document.getElementById(id);
  elem.style.display = 'block';
}
function popup_hide(id) {
  elem = document.getElementById(id);
  elem.style.display = 'none';
}

</script>
</head>
<body>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit. In eget velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum wisi enim, feugiat in, iaculis nec, convallis tempus, tortor. Donec nec ipsum sed nulla semper tempus. Nullam facilisis accumsan mauris. Duis in pede. Donec tristique, diam at dapibus scelerisque, lorem nisl lacinia nibh, vel auctor nibh lorem quis magna. Suspendisse potenti. Etiam in ipsum vitae velit vehicula rhoncus.
<a href="javascript: popup_show('MyPopUp');">pop up</a>
</div>

<div id="MyPopUp" class="PopUp">
<a href="javascript: popup_hide('MyPopUp');">close</a><br>
Mauris condimentum, velit in fermentum imperdiet, tellus mi porta erat, malesuada varius velit sapien nec turpis. Morbi eu nisl. Nullam condimentum sapien. Donec eget wisi a libero condimentum facilisis. Praesent eu pede in dui hendrerit facilisis. Phasellus interdum consectetuer neque. Cras bibendum leo at tortor. Cras commodo, tortor id egestas tincidunt, nulla lectus posuere orci, quis elementum quam nunc eu mi. Pellentesque sodales ultricies justo. Sed eleifend lacinia nibh. Phasellus vulputate risus eget wisi. Nam sit amet libero id ipsum tincidunt sagittis. Nam vitae enim vitae sapien iaculis elementum. Duis turpis purus, iaculis quis, imperdiet id, ultricies ac, justo. Aenean sit amet lectus. Suspendisse vitae turpis.
</div>

</body>
</html>
0
 
weikelbobAuthor Commented:
I'm trying to keep it simple. What exactly does this do? :

<style>

.NewDiv {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal; font-size: 8.5pt; text-align: left;
border-left: ##FFFFFF 1px solid; border-right: ##DDDDDD 1px solid;
border-bottom: ##DDDDDD 1px solid;
}
</style>

then in the body:

<div class="NewDiv">

Thanks,

Bob
0
 
GrandSchtroumpfCommented:
> I'm trying to keep it simple.
The solution i gave you is as simple as it gets.

> What exactly does this do?
sets the font and border on a div.  that's all.  no popup at all.
0
 
GoofyDawgCommented:
Bob,

I guess it boils down to what you mean by "classy." GS provided excellent and simple examples of doing a pseudo-popup window using pure CSS and a combination of CSS and JavaScript. If you want to make it "classy," you can add a background image or add some color to the div. We can give you basic mechanics, but styling is pretty much up to your own imagination. What more would you like to see?

GoofyDawg
0
 
weikelbobAuthor Commented:
I finally got it working.  Now I'll work on it to make it look as nice as possible. Any help you can give would be great. For example, it needs a small margin on the left side of the popup

I'll up the point up to 500 for your great help.

Bob

0
 
GrandSchtroumpfCommented:
to add a padding add this to the stylesheet:

div.PopUp {
  padding: .5em;
}

thanks for the offer to increase the points, but i think you cannot do that once you have accepted the solution.

<:°)
0
 
weikelbobAuthor Commented:
Thank you GrandSchtroumpf,

A little padding and background color and I think it will work. Oh, how do I add a background picture?

Bob
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now