Hey guys - I haven’t heard a response on this yet so wanted to ask again: I implemented my modal pretty much as Sergie described so by default it is hidden. I’d like to create a link that will take users to the page with the modal open, while having it closed by default for most visitors. Any ideas?
1 Like
Hmmm I tried EndangeredMassa’s code here: How to use a link to call JavaScript? - Stack Overflow but I’m still not having any luck. Any suggestions?
1 Like
Hi @Colin_Roper, no problem! This is pretty straightforward.
FIrst, add this new updated code:
<script type="text/javascript">
$(document).ready(function () {
$('.modal-link').click(function () {
$('.modal-background').fadeIn();
return false;
});
$('.close-modal').click(function () {
$('.modal-background').fadeOut();
return false;
});
if (location.hash == '#show-modal') {
$('.modal-background').fadeIn();
}
});
</script>
Then, whenever you link to the page with the modal, you’ll need to use a custom url and append the hash to the end of the link. For example, if you’re linking to the home page, your link would look like this:
/#show-modal
And if you’re linking to a another page, use that page’s url, for example:
/contact#show-modal
Hope that helps!
-Dan
3 Likes
Hey Dan - Thanks so much. That works perfectly!
Also shout out for bartekkushtra for reaching out to help.
@thesergie, this is a really nice rollup of @bartekkustra’s input that will cut the exploration time a lot for modals before you roll the feature. Thanks!
I’m about to prototype a web app that will use a ton of modals though, and expect they will be an order of magnitude faster to create and easier to maintain once you do roll a feature. If just for scoping the project, I gotta ask: Any estimates on when this might be ready?
Thanks!
I can’t give you an estimate quite yet. It’s a totally different UI/UX paradigm to add something that is by default invisible and fills the whole page, so it will take a bit to come up with a straightforward solution. I’d say go ahead and start the site.
@danro ah it looks like I spoke too soon. Your code works perfectly, however the referring site is paypal (as a checkout success return page) and it automatically appends something like “?tx=7FL474947A524771X&st=Completed&amt=11%2e03&cc=USD&cm=&item_number=” to the end of my URL. Even though the #show-modal is still being attached in the URL, the javascript isn’t pickup up the action in this case. Any ideas for this?
@Colin_Roper Sure. In the custom code…
Change this line:
if (location.hash == '#show-modal') {
… to this:
if (/#show-modal/.test(location.hash)) {
-Dan
Thanks for your quick response @danro
For some reason the simple URL is working: www.myurl.com/#show-modal
but the amended URL still isn’t: www.myurl.com/#show-modal?tx=7FL47494… (it just loads the non-modal page)
Hmm odd that PayPal doesn’t handle this properly. Try changing your url to this:
www.myurl.com/?modal=show
And finally change the custom code to this:
if (/modal=show/.test(location.href)) {
-Dan
2 Likes
@Colin_Roper I’m glad I could have helped. And I’m sorry I didn’t do that faster… I spent 6 hours in the hospital with my friend yesterday… Moving to another apartment is a hard thing to do ^^ Remember not to drop yourself from stairs 
@danro thanks for helping Colin 
1 Like
Thanks for all the helpful info!
I have the modal working as a part of my navigation bar. Whenever you click it however, it takes you back up to the top of the screen. So if you have scrolled down past the first section and click the modal it takes you back up to the top.
Is there anyway for it to open up where ever you are on the screen?
Thanks!
https://webflow.com/design/disabilityinsurancegeek?preview=5b30ac493293a52dd7200c17f7c390b2
@LJB You have to have e.preventDefault(); in your code right after function(e) {.
In example
$(document).ready(function() {
$('.button-class-here').click(function(e) {
e.preventDefault();
$('.popup-window-class-here').fadeIn();
});
$('.close-button-class-here').click(function(e) {
e.preventDefault();
$('.popup-window-class-here').fadeOut();
});
});
The e in function is neccesarry for e.preventDefault(); to work.
Hey folks,
Wanted to share the code I’m using, which rolls up a few of the tweaks above and adds a few of my own, in case anyone wanted to copy-paste it:
$(document).ready(function() {
$('.modal-link')
.css('cursor', 'pointer')
.click(function(e) {
e.preventDefault();
$('.modal-background').fadeIn();
$('body').css('overflow', 'hidden');
});
$('.close-modal')
.css('cursor', 'pointer')
.click(function(e) {
e.preventDefault();
$('.modal-background').fadeOut();
$('body').css('overflow', 'auto');
});
});
You’ll note: the links that open/close the modal get a pointer cursor, so if you have a regular text div open/close the popup it’ll feel actionable. Also, I tweak the overflow of ‘body’ while the popup is open, so that only popup content will be scrollable.
I use a fixed window (not just the background) with fixed height/width of 70% and move it left/down 15% (so it’s centered), then set overflow:scroll. That means that I can add more content and it’ll just be scrollable. Note that this means you need to fix the window’s close button as well, I just move it down/left 16% so it appears in the top-right corner of the window regardless of scroll.
Hope this helps some of you.
3 Likes
Hi Guys,
I’ve followed the instructions in the original post I’m having an issue with the nav links appearing above the modal window. Originally I had an issue with a lot of the elements appearing over the top of the modal, however changing the z index to 3 fixed this (missed it in the original post).
Any idea why the nav links/brand would be appearing over the top of the modal?
Thanks
Set z-index of modal to 999 
Good catch @thunder!
As @bartekkustra mentioned you need to set a z-index for the modal that’s greater than the navbar component. Select the navbar and see what the z-index is set to and make sure it’s greater than that.
Hey!
Change
$('body').click(function() {
$('.modal-background').fadeOut();
})
to
$('body').click(function() {
if($('.modal-background').css('display') != 'none') {
$('.modal-background').fadeOut();
}
});
Should do the work.
#edit
Nope, It doesn’t work. Let me find a solution for this okay? Be right back
@edit2
Okay, found a fix It’s not exactly what I wanted but works and adds that nice effect ;D
html
<div class="popupbg">
<div class="popup">click anywhere</div>
</div>
<p>clickme</p>
css
.popup {
display: block;
z-index: 99;
margin: 0 auto;
width: 300px;
height: 300px;
background: #f9f9f9;
box-shadow: #333 0px 0px 8px -2px;
}
.popupbg {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(55, 55, 55, 0.3);
z-index: 98;
}
jQuery
$('p').click(function () {
$('.popupbg').fadeIn();
});
$('.popupbg').click(function () {
$('.popupbg').fadeOut();
});
live demo
1 Like