Add to URL when modal is visible

Design help Custom code
1

On the site I’m creating I would like to click a button which makes a modal visible. When that button is clicked I would like the url to have a parameter added to it. That way, someone can copy and share the url with the modal open. Does anyone know how to do this?

I tried to use this code, which works to show/hide the modal and when someone enters the url with “#show-modal” added, it does in fact load the page with it visible. But if you just click the “modal-link” element to open that modal, the url does not update with that parameter. So the issue is a page visitor does not see the extra parameter when they copy the url.

<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>
1 Like
2

Hi @Broussard, I just now found a solid answer for your question. Sharing it now incase future readers have similar questions.

This solution combines the native Webflow tabs component with MemberScript #31 to create an easy-to-use modal with tons of benefits.

Benefits:

:white_check_mark: Open any modal with a link. Try it
:white_check_mark: Easy to design & hide.
:white_check_mark: Multiple modals per page.
:white_check_mark: No Webflow Interactions.
:white_check_mark: Works with Webflow CMS.
:white_check_mark: Works with Rich Text elements.

Here’s a link to the cloneable project.

Here’s the 4min tutorial video:

I hope this helps!

3

This looks awesome! Thanks so much for sharing @DuncanHamra
I had given up on that functionality but the project is ongoing, so I’m looking forward to possibly adding it!

1 Like