Solved

modal window css

Posted on 2010-09-20
3
371 Views
Last Modified: 2012-05-10
I'm using these styles for my modal window.  they work great as long as i don't have to scroll down the browser. when i scroll down and click to open up a modal window, the modal window still loads in that absolute position. any ideas how to get the actual #dialog style to load relative to where i am in my browser window?

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
   left:0;
  top:0;
  display:none;
  z-index:9999;
  padding:20px;
  font:14px Verdana, Arial, Helvetica, sans-serif;
}
#boxes .window label{
font:12px Verdana, Arial, Helvetica, sans-serif;
}

#boxes #dialog {
  padding:10px;
  background-color:#ffffff;
  border:4px solid #CCCCCC;
}

Open in new window

0
Comment
Question by:phillystyle123
  • 2
3 Comments
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Can you post a live link or example?  
0
 

Author Comment

by:phillystyle123
Comment Utility
yes:

http://dev.roydent.com/endodontic/gutta-percha-points.asp
User id= roydentdev
Password= roydent5100

click on the images further down the page
0
 

Accepted Solution

by:
phillystyle123 earned 0 total points
Comment Utility
the answer appears to be "position:fixed;"
#boxes #dialog {
  padding:10px;
  border:4px solid #ccc;
  background:#fff;
  position:fixed;
}

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now