Jump to content

Scrolling popup


SerenityNetworks

Recommended Posts

I'm using the following to open a popup that I'll use for a 'help' dialog. But I'd like the popup to expand in height automatically and be scrollable. I'm not figuring out how to accomplish this feature. Any help will be appreciated.

 

Thanks,

Andrew

/* START OF STYLES FOR HELP AND INSTRUCTIONS DIALOG/POPUP */.modal-box {  display: none;  position: absolute;  z-index: 1000;  width: 80%;  background: white;  border-bottom: 1px solid #aaa;  border-radius: 4px;  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);  border: 1px solid rgba(0, 0, 0, 0.1);  background-clip: padding-box;}.modal-box header,.modal-box .modal-header {  padding: 1.25em 1.5em;  border-bottom: 1px solid #ddd;}.modal-box header h2,.modal-box header h3,.modal-box .modal-header h2,.modal-box .modal-header h3 { margin: 0; }.modal-box .modal-body { padding: 2em 1.5em; }.modal-box footer,.modal-box .modal-footer {  padding: 1em;  border-top: 1px solid #ddd;  background: rgba(0, 0, 0, 0.02);  text-align: right;}.modal-overlay {  opacity: 0;  filter: alpha(opacity=0);  position: absolute;  top: 0;  left: 0;  z-index: 900;  width: 100%;  height: 100%;  background: rgba(0, 0, 0, 0.3) !important;}a.close {  line-height: 1;  font-size: 1.5em;  position: absolute;  top: 5%;  right: 2%;  text-decoration: none;  color: #bbb;}a.close:hover {  color: #222;  -webkit-transition: color 1s ease;  -moz-transition: color 1s ease;  transition: color 1s ease;}@media (min-width: 32em) {  .modal-box { width: 70%; }}/* END OF STYLES FOR HELP AND INSTRUCTIONS DIALOG/POPUP */
<div id="popup" class="modal-box">    <header>    <a href="#" class="js-modal-close close">×</a>    <h3>Help and Instructions</h3>  </header>  <div>     <p>My content</p>  </div>  <footer>    <a href="#" class="js-modal-close">Close</a>  </footer></div> 
Link to comment
Share on other sites

Perfect. My issue was not having the ".modal-body" properly defined in the CSS.

 

Thank you,

Andrew

Link to comment
Share on other sites

Ah, a couple follow-up questions:

 

1) When I use a bookmark in the dialog that goes towards the bottom of the dialog then the main page also scrolls down. I'd like to limit the scrolling to be just within the dialog. Is there a way to keep the main page from scrolling when a hyperlink/bookmark is used?

 

2) The same is true when using a bookmark to "Return to top". I need the bookmark to scroll (return) the dialog back to the top. But instead the bookmark just scrolls the main page. What is the syntax I need to use to scroll (up or down really) within just the dialog?

 

3) I also noticed that if I've scrolled in the dialog box, close it, and re-open that it re-opens to the same place in the scrolling it was at when I closed the dialog. Is there a way to have the dialog always open scrolled to the top?

 

Thanks,

Andrew

Edited by SerenityNetworks
Link to comment
Share on other sites

This post is a mistake. Please ignore and see the above post.

Edited by SerenityNetworks
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...