{"id":5594,"date":"2024-04-14T11:52:35","date_gmt":"2024-04-14T03:52:35","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5594"},"modified":"2024-04-14T11:52:35","modified_gmt":"2024-04-14T03:52:35","slug":"establish-a-pop-up-with-stationary-positioning","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/establish-a-pop-up-with-stationary-positioning\/","title":{"rendered":"Establish a pop-up with stationary positioning"},"content":{"rendered":"\n
\n

We are here to guide you in crafting a pop-up that is slightly unique \u2014 one that is initiated by the user. The user triggers the pop-up animation by clicking a button, revealing a form. (You can always modify the trigger based on your requirements.)<\/p>\n

What you will learn in this tutorial:<\/strong><\/p>\n

    \n
  1. Construct a fixed modal<\/li>\n
  2. Integrate a button into your project<\/li>\n
  3. Configure the pop-up trigger<\/li>\n
  4. Organize the pop-up animation<\/li>\n
  5. Configure the closing animation<\/li>\n<\/ol>\n

    Construct a fixed modal<\/h2>\n

    To create an overlay for your content, you can follow these 3 steps:<\/p>\n

      \n
    1. Develop a pop-up wrapper<\/li>\n
    2. Include a form element<\/li>\n
    3. Create a “close” link<\/li>\n<\/ol>\n

      Develop a pop-up wrapper<\/h3>\n

      To insert a Div block<\/strong> as the wrapper for the modal, use the keyboard shortcut A<\/strong> to access the Add panel<\/strong> (or click the plus icon in the top left corner) and drag a Div block<\/strong> element into your project.<\/p>\n

      \n
      <\/div>\n<\/figure>\n

      For better organization of your project, position the Div block<\/strong> at the top of the Body element (while not mandatory, this practice aids in organizing elements). Drag the element into the Navigator<\/strong> and place it within the Body element<\/strong>.<\/p>\n

      Select the Div block<\/strong>, assign it a class name like \u201cPop-up wrapper\u201d and define style attributes in the Style panel<\/strong>:<\/p>\n

        \n
      • Display: flex<\/li>\n
      • Flex layout: vertical, center, center (to center the form vertically)<\/li>\n<\/ul>\n
        \n
        <\/div>\n<\/figure>\n

        Scroll through the Style panel <\/strong>to configure additional style settings ensuring the wrapper occupies the entire view:<\/p>\n

          \n
        • Position: Fixed, full<\/li>\n
        • Z-index: 9999 (to place the wrapper above all other elements in the project)<\/li>\n<\/ul>\n
          \n
          <\/div>\n<\/figure>\n

          Apply a background color to make the pop-up stand out from the remaining content in your project. Experiment with #000000 and 80% opacity \u2014 or any other background color that suits your project.<\/p>\n

          \n
          <\/div>\n<\/figure>\n

          Include a form element<\/h3>\n

          To have a pop-up with a form, you will require a Form<\/strong> element inside the wrapper.<\/p>\n

          Select the wrapper, insert a Form<\/strong> using the Quick Find feature:<\/p>\n

            \n
          1. Press Command + E<\/strong> (on Mac) or Control + E<\/strong> (on PC)<\/li>\n
          2. Search for “form”<\/li>\n
          3. Choose the Form<\/strong> element and place it within your \u201cPop-up wrapper\u201d (due to the previous styles on the wrapper, the Form<\/strong> will utilize Flexbox for centering)<\/li>\n
          4. Design your form to suit your project (e.g., restrict max-width to 500 pixels and set width to 100%)<\/ol>\n
            \n
            <\/div>\n<\/figure>\n

            <\/p>\n

            By combining these styles, your form is confined within 500 pixels (max-width) while being responsive across various device sizes (100% width). Learn more about responsive design in Webflow.<\/p>\n

            \n
            <\/div>\n<\/figure>\n

            <\/p>\n

            Create a “close” link<\/h3>\n

            Next, let\u2019s insert a text link for users to close the pop-up after submitting the form.<\/p>\n

            To achieve this, drag a Text link<\/strong> in the Navigator<\/strong> to the top of our \u201cPop-up wrapper\u201d (once again, while not mandatory, this practice aids in organizing the elements).<\/p>\n

            \n
            <\/div>\n<\/figure>\n

            \u00a0<\/p>\n

            <\/p>\n

            AndWith the link selected, assign a class name (e.g., Pop-up close) to the link and apply some styling:<\/p>\n

              \n
            • Position: Absolute<\/li>\n
            • Top: 5%<\/li>\n
            • Right: 5%<\/li>\n
            • Bottom: Auto<\/li>\n
            • Left: Auto<\/li>\n<\/ul>\n
              \n
              <\/div>\n<\/figure>\n

              By utilizing this set of styling, you can keep your close link positioned at the top of the pop-up wrapper.<\/p>\n

              At this point, all the elements for the pop-up have been created. Proceed to change the display style of the “Pop-up wrapper” to None <\/strong>in order to hide it when it’s not in use.<\/p>\n

              \n
              <\/div>\n<\/figure>\n

              <\/p>\n

              To make the opacity of the “Pop-up wrapper” 0%, which will prepare you for creating a smooth fade-in animation upon interaction.<\/p>\n

              \n
              <\/div>\n<\/figure>\n

              Insert a button into your project<\/h2>\n

              The final step in your project setup involves adding an element, such as a button, to trigger the pop-up when clicked.\u00a0<\/p>\n

              To incorporate a button:<\/p>\n

                \n
              1. Press A<\/strong> on your keyboard to access the Add panel<\/strong> (or click the + icon on the top-left of the Designer)<\/li>\n
              2. Drag a Button<\/strong> element to the desired location within your project<\/li>\n<\/ol>\n
                \n
                <\/div>\n<\/figure>\n

                <\/p>\n

                Configure the pop-up trigger<\/h2>\n

                With the button added to the project, you can now establish an interaction to trigger the pop-up when the button is clicked.<\/p>\n

                In the past, interactions involved complex JavaScript libraries that required various tools, plugins, and substantial learning curves in coding. With Webflow, we can visually create our pop-up interaction.<\/p>\n

                To begin, select the button on the canvas. Subsequently, click the Interactions symbol to unveil the Interactions panel<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                <\/p>\n

                Within the Interaction<\/strong> panel, click the + icon for Element trigger<\/strong>, then opt for the Mouse click<\/strong> alternative.<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                Establish the pop-up animation<\/h2>\n

                While Webflow offers a few preset interactions, you will create a customized interaction for unveiling your pop-up. Upon clicking the button, your pop-up will gradually fade-in. To achieve this – under On 1st click<\/strong> – choose the Action<\/strong> dropdown and select the Start an animation<\/strong> option. Subsequently, press the + icon to incorporate our timed animation<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                \u00a0<\/p>\n

                You can now assign a name to your animation (e.g., Pop-up) and then select the element you wish to animate.\u00a0<\/p>\n

                Note<\/strong>: Ensure you choose the element while the Interaction panel is active.<\/p><\/blockquote>\n

                For this project, choose the “Pop-up wrapper” element from the Navigator<\/strong>. Subsequently, click the + icon beside Actions<\/strong>, then choose Opacity<\/strong> (this will initially set the opacity state).<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                <\/p>\n

                First, let’s consider the timing (notice the timing display at the panel’s bottom). Start by activating the Set as initial state<\/strong> toggle, and assign the value to 0%<\/strong>.<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                <\/p>\n

                Next, select the + symbol near Actions<\/strong>, followed by choosing Hide\/Show<\/strong> (to display the hidden pop-up – its opacity remains concealed). Ensure to set the Display<\/strong> as Flex<\/strong>.<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                <\/p>\n

                To complete the last task, transition the opacity from 0% to 100%. To execute this, choose the + symbol beside Actions<\/strong>, then opt for Opacity<\/strong> (which auto-adjusts it to 100%).<\/p>\n

                Finally, click the Done<\/strong> button, and proceed to publish the project. Upon clicking the button now, your pop-up will surface. Although, you cannot close it yet; hence, establish an interaction on the “Pop-up close” link.<\/p>\n

                Prepare the closure animation<\/h2>\n

                To construct a closure interaction, initially, target the “Pop-up close” link within the Navigator<\/strong>.<\/p>\n

                \n
                <\/div>\n<\/figure>\n

                <\/p>\n

                Subsequently, introduce the interaction for closing the pop-up once the link is hit.\u00a0<\/p>\n

                Follow these steps:<\/p>\n

                  \n
                1. Click the Interaction<\/strong> icon to unveil the Interaction<\/strong> panel<\/li>\n
                2. Choose the Mouse click<\/strong> option<\/li>\n
                3. From the Action<\/strong> dropdown, select Start an animation<\/strong><\/li>\n
                4. Then, add your timed animation by clicking the + symbol<\/li>\n
                5. Label your animation (like, Close pop-up)<\/li>\n
                6. In the Interaction<\/strong> panel, highlight the \u201cPop-up wrapper\u201d element in the Navigator<\/strong><\/li>\n
                7. Include the Opacity<\/strong> option by selecting the + icon next to Actions<\/strong><\/li>\n
                8. Adjust the opacity to 0%<\/li>\n
                9. Add another action by selecting the + icon next to Actions<\/strong>, then click Hide\/Show<\/strong><\/li>\n
                10. Opt for None<\/strong> within the Display<\/strong> setting<\/li>\n<\/ol>\n
                  \n
                  <\/div>\n<\/figure>\n

                  <\/p>\n

                  Finally, click the Done<\/strong> button, then republish the project to test the pop-up.<\/p>\n

                  Excellent job on developing a pop-up with fixed positioning. Well done!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn how to trigger a click animation to show a pop-up.","protected":false},"author":2,"featured_media":5182,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-5594","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5594"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5594\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5145"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}