Popup for link in announcement bar custom code

Hello,

I was wondering if there is some code that would allow me to create a pop-up for a link in the announcement bar (there are 3 links - only one would show a popup).

We want the popup to show when clicking the Financing Available link.

Attached is the image of what we would like. Passcode for website is 1234

Thanks!

This is a good plugin:

https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin

1 hour ago, Ziggy said:

This is a good plugin:

https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin

I do not want to purchase a plug-in. Only straight code

Thanks!

You can create a section in footer, then we can give code to achieve this. 

On 7/21/2023 at 7:16 PM, tuanphan said:

You can create a section in footer, then we can give code to achieve this. 

Hello,

I already add the section in the top section of the footer.

Thanks!

12 hours ago, CaresaCreativeCo said:

Hello,

I already add the section in the top section of the footer.

Thanks!

I forgot to ask. What is your site url?

7 hours ago, tuanphan said:

I forgot to ask. What is your site url?

https://arizonaturfmasters.squarespace.com/

password: 1234

Thanks!

16 hours ago, CaresaCreativeCo said:

https://arizonaturfmasters.squarespace.com/

password: 1234

 

Thanks!

Thank you. Click on Get a free quote or?

will make this section in lightbox?

3 hours ago, tuanphan said:

Thank you. Click on Get a free quote or?

will make this section in lightbox?

The "financing available" link - thanks!

21 hours ago, CaresaCreativeCo said:

The "financing available" link - thanks!

Add to Settings > Developer Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('#announcement-bar-text-inner-id a[href*="#financ"]').click(function(){
  	$(' footer.sections section:first-child').addClass('show');
  });
    $('footer.sections section:first-child').click(function(){
    	$(this).removeClass('show');
    });
})
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    z-index: 999999;
    visibility: hidden;
}
  .show {
  	visibility: visible !important;
  }
</style>

4 hours ago, tuanphan said:

Add to Settings > Developer Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('#announcement-bar-text-inner-id a[href*="#financ"]').click(function(){
  	$(' footer.sections section:first-child').addClass('show');
  });
    $('footer.sections section:first-child').click(function(){
    	$(this).removeClass('show');
    });
})
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    z-index: 999999;
    visibility: hidden;
}
  .show {
  	visibility: visible !important;
  }
</style>

 

This didn't work at all. Is it because I have several links in the announcement bar? 

First, edit this link

and enter

#finance

Next, add above code again

On 7/29/2023 at 3:28 AM, tuanphan said:

First, edit this link

and enter

#finance

Next, add above code again

Hello,

I did this and it still doesn't work.

On 8/10/2023 at 3:20 AM, CaresaCreativeCo said:

Hello,

I did this and it still doesn't work.

Sorry, my code missing a space character

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('#announcement-bar-text-inner-id a[href*="#financ"]').click(function(){
  	$('footer.sections section:first-child').addClass('show');
  });
    $('footer.sections section:first-child').click(function(){
    	$(this).removeClass('show');
    });
})
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    z-index: 999999;
    visibility: hidden;
}
  .show {
  	visibility: visible !important;
  }
</style>

On 8/10/2023 at 10:51 PM, tuanphan said:

Sorry, my code missing a space character

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('#announcement-bar-text-inner-id a[href*="#financ"]').click(function(){
  	$('footer.sections section:first-child').addClass('show');
  });
    $('footer.sections section:first-child').click(function(){
    	$(this).removeClass('show');
    });
})
</script>
<style>
  footer.sections section:first-child {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    z-index: 999999;
    visibility: hidden;
}
  .show {
  	visibility: visible !important;
  }
</style>

 

Hello,

It still isn't working.