Jump to content

How to make a button with a pop-up window

Recommended Posts

  • Replies 12
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

To achieve this, you can

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

image.thumb.png.7df68ca4451f43b7f921a2ddf6dfc76c.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

(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;
}

image.thumb.png.a27224ba0e1f466657c6ce5998459167.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Screenshot 2024-02-22 at 1.54.10 PM.png

Screenshot 2024-02-22 at 2.16.20 PM.png

Screenshot 2024-02-22 at 2.16.34 PM.png

Screenshot 2024-02-22 at 2.16.54 PM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.