How to make a button with a pop-up window

Hello!)
Can you help me please to create a pop-up window on the button "Contact us". I don`t want to open a new page for that, just an extra window when someone click on the button.

Thank you

Click Contact Us >> Open a Form or custom content?

If Open a Form, Form Block has already this feature

If custom content, click button > Show something like this?

Sorry, maybe I did not explain it correctly.

I attached the screenshot: the first part of the video is how I`d like to be, and the second part is what I have)

Both websites are built with Squarespace
Thank you

On 2/3/2024 at 7:03 AM, Alla7 said:

Sorry, maybe I did not explain it correctly.

I attached the screenshot: the first part of the video is how I`d like to be, and the second part is what I have)

Both websites are built with Squarespace
Thank you

Screen Recording 2024-02-02 at 4.57.31 PM.mov

Can you share link to site in video?

Sorry, just checked this website and it is not a Squarespace(
So I can`t create the same window in Squarespace, is it correct?

On 2/6/2024 at 10:15 AM, Alla7 said:

Sorry, just checked this website and it is not a Squarespace(
So I can`t create the same window in Squarespace, is it correct?

You can share link to that site, I can imagine your request easier

Yes, of course - https://www.sameyeam.info/social-media-strategy-for-businesses/

To achieve this, you can

First, add a section in Site Footer > Design this layout

Next, edit that section > Add a Code Block > Paste this line

<span class="close-popup">X</span>

Next, edit Header button > Enter this url

#popup

Next, let me know, I will test some code to make this section become popup when clicking Contact Button

Thank you!
Did it!)

I forgot to ask, what is your site url?

https://fuchsia-circle-s8mg.squarespace.com/config/
Password is Sspace24

On 2/17/2024 at 9:06 AM, Alla7 said:

https://fuchsia-circle-s8mg.squarespace.com/config/
Password is Sspace24

(0) you are setting Header button open in New tab, you need to disable this option

(1) Next, add this code to Custom CSS, it will move this section to middle of screen

[data-section-id="65caaf054567630bcf4944c5"] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999999;
    width: 90%;
    min-width: 300px;
    max-width: 750px;
}

footer.sections {
    z-index: 9999999 !important;
}
[data-section-id="65caaf054567630bcf4944c5"]  .section-border {
    top: 0 !important;
}

span.close-popup {
    position: fixed;
    top: 10px;
    left: 10px;
}

You can adjust width value in the code

(2) Next, add this code to Custom CSS, it will make this section disappear 

[data-section-id="65caaf054567630bcf4944c5"] {
    display: none;
}
.show-popup {
	display: block !important;
}

(3) Next, add this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    	$('header#header a.btn').click(function(){
        	$('[data-section-id="65caaf054567630bcf4944c5"]').toggleClass('show-popup');
        });
    $('span.close-popup').click(function(){
        	$('[data-section-id="65caaf054567630bcf4944c5"]').removeClass('show-popup');
        });
    });
</script>

I forgot, you are setting Header button open in New tab, you need to disable this option

Hello! I'm sorry, I just have a small question about pop-up windows:

1. Is it possible to change the size of the close button or make it possible to close the window by clicking outside of it?
2. When I open this pop-up window on the home page, the position of the window is okay, but when I open it on any other pages, it goes to the bottom of the page.
3. I'd like to add the same pop-up window to the words "Work with us" on the home page at the bottom. Can I use the same codes to do that?
   
   * I attach screen shots