I’m trying to recreate the functionality of the Pinterest.com modals. I already use Simple Modal on my site so I was hoping it could be used in the same way.
My current code:
jQuery:
$('#my-modal').modal({
opacity: 95,
overlayCss: {
backgroundColor: '#fff'
},
position: [100, 0]
});
HTML:
<div id="my-modal" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus risus, placerat nec sagittis non, egestas sed mauris. Nulla at porttitor enim. Nunc sit amet augue lacus, vitae molestie velit. Donec ac metus odio. Cras a leo nisl. Sed id ultricies lacus. Suspendisse imperdiet volutpat commodo. Nulla facilisi. Quisque sodales tortor at magna viverra ac porta risus gravida. Ut non nunc eu erat faucibus molestie a et neque. Fusce ornare metus non tortor accumsan commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque congue faucibus commodo. Nullam posuere, leo et ultricies commodo, est augue rhoncus justo, vel posuere enim ligula mollis mi. Vivamus pretium pulvinar accumsan. Mauris eu risus magna, vitae sollicitudin mauris.
Aliquam erat volutpat. Mauris libero lacus, gravida rutrum sollicitudin at, convallis sit amet ante. Proin ac mi ac nunc sollicitudin congue sed a mauris. Maecenas eget vehicula magna. Cras congue ipsum varius diam porttitor et molestie magna vulputate. Quisque bibendum ornare porta. Nunc eu urna nec lectus fringilla mattis eu et ante. Proin sed felis mi, vitae sagittis odio. Vivamus metus odio, bibendum ut scelerisque ut, euismod nec ligula. Nullam id orci vitae nisi gravida congue nec non est. Pellentesque ut massa sit amet lacus laoreet congue. Maecenas eleifend nisi nisl. Vivamus tristique, lacus malesuada cursus consectetur, elit velit imperdiet risus, vel adipiscing purus sem vitae leo. Sed porta lectus eu tortor molestie rutrum.
Integer massa dolor, tempor in ultrices ac, interdum ut nisl. Aenean sed tellus quis massa porttitor blandit. Ut et nunc at mi semper feugiat. Ut vel lorem dolor. Nullam fermentum, augue quis lacinia ultricies, turpis risus euismod est, eu dapibus quam urna dapibus quam. Duis laoreet mattis tellus, at sollicitudin tellus rutrum sit amet. Sed malesuada, tortor sed faucibus eleifend, neque orci euismod libero, sed laoreet sapien dui pulvinar orci.
Sed sed ornare orci. Nunc tempus, leo quis venenatis vehicula, ipsum tellus pretium odio, quis ultrices sapien metus at quam. Nam id viverra leo. In elit dolor, tempor eu hendrerit et, pellentesque a justo. Proin metus dui, rhoncus et interdum sed, lobortis eget urna. Donec et sollicitudin sem. Pellentesque porta, nulla sed rhoncus hendrerit, magna augue vulputate mi, suscipit blandit felis massa sit amet ipsum.
In at urna arcu, ac placerat quam. Ut mattis sagittis dui consectetur lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at ipsum ultricies lorem feugiat bibendum. Aliquam consectetur risus feugiat dui sagittis sed condimentum dui fringilla. Morbi enim velit, condimentum nec aliquam in, lobortis et neque. Pellentesque risus nisl, dapibus vel pulvinar ac, vestibulum in nibh.
Nulla gravida porttitor diam vitae faucibus. Sed tincidunt ante vitae dui gravida ut ultrices est dictum. Vivamus vehicula fermentum arcu. Fusce rhoncus, metus nec pulvinar vestibulum, magna tellus tempus justo, et tempor dui dui nec urna. Vestibulum vitae felis lectus. Etiam quis varius urna. Donec accumsan massa sed nunc elementum iaculis. Vestibulum at elit sed mi facilisis varius id at elit. Maecenas in justo urna, vel cursus elit. Integer ut magna sem, quis dapibus justo.
Vivamus ornare consequat malesuada. Donec porttitor suscipit ante, sed gravida elit tristique vitae. Nam euismod odio at nunc volutpat tristique. Duis at porttitor dolor. Curabitur scelerisque feugiat viverra. Etiam tempus, sapien aliquet gravida lacinia, lectus nibh posuere quam, et pharetra elit risus et erat. Donec viverra ornare tellus et eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lacus ligula, dictum in hendrerit et, blandit et nisl. Integer dapibus interdum pharetra. Vestibulum metus leo, interdum fringilla semper accumsan, malesuada vel risus. Cras auctor molestie lobortis.
Nullam quis hendrerit mauris. Aenean lobortis leo ultricies sem tristique vel tempus eros fermentum. Duis fringilla velit nibh, blandit dignissim sem. Quisque posuere lorem et tellus sagittis in imperdiet erat consequat. Maecenas sit amet elit magna, in cursus arcu. Sed in purus fringilla orci imperdiet blandit. Cras interdum nibh eget ipsum scelerisque vel hendrerit dui accumsan. Proin molestie sollicitudin lacus id aliquam. Donec sit amet luctus augue. Ut nec libero massa. Fusce interdum orci eget diam ultricies sit amet laoreet magna placerat. Curabitur non mi lorem. Vestibulum in felis felis. Vestibulum sit amet sapien erat. Nunc congue enim quis nisi gravida dapibus. Vestibulum laoreet eros ac nulla fermentum sodales.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ultrices felis eget ligula sollicitudin fermentum. Morbi sit amet lorem at ante feugiat condimentum. Mauris porta, tortor eu dapibus accumsan, massa libero consectetur leo, eleifend tristique neque lacus eu risus. Aliquam tincidunt pulvinar purus sed imperdiet. Morbi laoreet lectus in risus placerat quis malesuada turpis placerat. Mauris enim diam, cursus non pharetra vitae, pharetra eget odio. Etiam adipiscing commodo ipsum vitae pretium. Proin laoreet mollis nibh et convallis. Vivamus elementum porttitor sapien, vitae luctus velit imperdiet non. Morbi non dui at felis accumsan porta et ut massa. Sed euismod mattis nisl a pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Quisque quis viverra leo.
Curabitur mollis nunc quis metus congue accumsan. Donec blandit dui nec mi pulvinar at elementum est auctor. Suspendisse blandit pellentesque tellus, a molestie dolor euismod ac. Integer fringilla, magna et tincidunt pharetra, nisi lorem sagittis dolor, vel dapibus sapien enim et sapien. Curabitur nisi est, porta at pulvinar pulvinar, tempor ut magna. Etiam vel ornare urna. Sed lacus arcu, facilisis eget sollicitudin vel, rutrum in lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras id turpis est. Nunc eleifend convallis mi condimentum tincidunt. Aliquam ac lacus odio. Quisque congue eleifend elit eget scelerisque. Vestibulum imperdiet tincidunt erat at tempor.
</div>
CSS:
#modal-profile { background: #fff; box-shadow: 0 0 3px #ccc; width: 500px; padding: 20px; border-radius: 10px; }
It has 2 problems:
- a scroll bar appears on the modal
- when I scroll outside the modal the entire document scrolls
On pinterest.com, when you scroll outside or inside the modal, it’s the modal that scrolls.
Anyway to get Simple Modal to work like the Pinterest modal?
Solution to be in your css:
1. Apply height:auto to fix scrollbar
#my-modal {height:auto}2. Apply position:fixed to fix scrolling issue. This will scroll your document contents but not your modal box
#my-modal {position:fixed}