SerenityNetworks Posted July 3, 2015 Share Posted July 3, 2015 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 More sharing options...
dauruk0512 Posted July 4, 2015 Share Posted July 4, 2015 Hi do you use bootsrap or not ! If use bootsrap here is my simple modal http://codepen.io/anon/pen/oXEKNg You click the launched demo then pop up coming up then scroll the content Note :Scroll depend how long the pargraph Freddy Sidauruk 1 Link to comment Share on other sites More sharing options...
SerenityNetworks Posted July 4, 2015 Author Share Posted July 4, 2015 Perfect. My issue was not having the ".modal-body" properly defined in the CSS. Thank you, Andrew Link to comment Share on other sites More sharing options...
SerenityNetworks Posted July 4, 2015 Author Share Posted July 4, 2015 (edited) 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 July 4, 2015 by SerenityNetworks Link to comment Share on other sites More sharing options...
SerenityNetworks Posted July 4, 2015 Author Share Posted July 4, 2015 (edited) This post is a mistake. Please ignore and see the above post. Edited July 4, 2015 by SerenityNetworks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now