{"id":1643,"date":"2024-03-28T16:21:25","date_gmt":"2024-03-28T16:21:25","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1643"},"modified":"2024-04-10T09:01:44","modified_gmt":"2024-04-10T09:01:44","slug":"modal","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/modal\/","title":{"rendered":"Modal"},"content":{"rendered":"\n

A Modal Block allows you to create a modal window or pop-up box on a webpage. It’s the perfect block for displaying conditional content like signup forms, notifications, etc, that gets presented in a popup window without redirecting to a new page.<\/p>\n\n\n\n

\"Add
Add Modal Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Modal Block, you\u2019ll get a block editing panel on the right-hand side. It has three options: General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

Trigger Type<\/h3>\n\n\n\n

It refers to the specific action type that displays the popup window upon clicking. With the Modal Plugin, you can find four Trigger types listed below:<\/p>\n\n\n\n

    \n
  • Button <\/strong>– Using the Button Trigger, clicking on the Button will display the popup window. Moreover, you can choose different button types and determine their style. You can also add icons to the buttons.<\/li>\n<\/ul>\n\n\n\n
    \"Button
    Button Trigger Type<\/figcaption><\/figure>\n\n\n\n
      \n
    • Icon <\/strong>– You can also use the icon to display the popup window. Choose the appropriate icon from the Icon library and set the appropriate color for the icon.<\/li>\n<\/ul>\n\n\n\n
      \"Icon
      Icon Trigger Type<\/figcaption><\/figure>\n\n\n\n
        \n
      • Image<\/strong> – The block also supports displaying the popup window by clicking an image. Choose an appropriate image according to your site requirement and click on the image to display popup window.<\/li>\n<\/ul>\n\n\n\n
        \"Image
        Image Trigger<\/figcaption><\/figure>\n\n\n\n
          \n
        • Text <\/strong>– You can add the text to display the popup window after clicking on it.<\/li>\n<\/ul>\n\n\n\n
          \"Text
          Text Trigger Type<\/figcaption><\/figure>\n\n\n\n

          Content Size <\/h3>\n\n\n\n

          It manages the popup window content size and comes up with the following options:<\/p>\n\n\n\n

            \n
          • Modal Width –<\/b> It determines the width of the modal, i.e., content area appearing inside the popup window. Moreover, you can set the width of the box to be different depending on the device, i.e., desktop, tablet, or mobile.<\/li>\n<\/ul>\n\n\n\n
            \"Adjust
            Adjust Modal Width<\/figcaption><\/figure>\n\n\n\n
              \n
            • Max Height<\/strong> – It determines the height of the modal i.e content area appearing inside the popup window. Moreover, you can also set the height of the box to be different depending on the device, i.e., desktop, tablet, or mobile.<\/li>\n<\/ul>\n\n\n\n
              \"Adjust
              Adjust Modal Height<\/figcaption><\/figure>\n\n\n\n
                \n
              • Popup Height <\/strong>– It determines the height of the popupbox. Moreover, you can also set the height of the box to be different depending on the device, i.e., desktop, tablet, or mobile.<\/li>\n<\/ul>\n\n\n\n
                \"Adjust
                Adjust Popup Box Height<\/figcaption><\/figure>\n\n\n\n

                Close Button<\/h3>\n\n\n\n

                It customizes the close icon appearing on the popup window and comes up with the following options:<\/p>\n\n\n\n

                  \n
                • Change Icon<\/b> – By default, a close icon is displayed, but you can change the icon depending on your site’s requirements.<\/li>\n\n\n\n
                • Icon Position<\/strong> – You can set the icon to be displayed on either the <\/strong>left or right side.<\/li>\n\n\n\n
                • Icon Size<\/strong> – It determines the size of the social icon. Moreover, you can change the size of the icon to be different depending on the device, i.e., desktop, tablet, or mobile.<\/li>\n\n\n\n
                • Icon Color <\/strong>– It allows you to choose the appropriate color for the cross icon added.<\/li>\n<\/ul>\n\n\n\n
                  \"Customize
                  Customize Close Icon<\/figcaption><\/figure>\n\n\n\n

                  Style <\/h2>\n\n\n\n

                  It provides the following styling options for the Modal Block. These are listed below:<\/p>\n\n\n\n

                  Properties<\/h3>\n\n\n\n
                    \n
                  • Alignment <\/strong>– It sets the alignments for the Trigger Style. You can set the alignments as Left, Center, or Right. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                    \"Set
                    Set Alignment Option to Center<\/figcaption><\/figure>\n\n\n\n

                    Button\/Text<\/h3>\n\n\n\n

                    Depending on the Trigger type, you’ll get each styling option. If you choose the button, styling options will be available. Likewise, if you choose text, you’ll get styling options for the text.<\/p>\n\n\n\n

                    For the Button Trigger type, the following options are available:<\/p>\n\n\n\n

                      \n
                    • Text Color <\/strong>– It changes the Text Color of the button.<\/li>\n\n\n\n
                    • Background <\/strong>– It sets the background color of the Button. You can change the visual appearance of the background by changing its color or adding an image. <\/li>\n\n\n\n
                    • Typography<\/strong> – It allows you to control the button text typography, such as\u00a0font family,\u00a0weight,\u00a0font size,\u00a0line height, and other related styling properties for the text. The options are listed below:\n
                        \n
                      • Family<\/strong> – The option allows you to choose the appropriate font family for the button text.<\/li>\n\n\n\n
                      • Weight<\/strong> – It refers to the thickness or boldness of the button text.<\/li>\n\n\n\n
                      • Size<\/strong> – It controls the font size of the button text.<\/li>\n\n\n\n
                      • Line Height<\/strong> – It manages the space above and below the button text.<\/li>\n\n\n\n
                      • Letter Spacing<\/strong> – It controls the amount of space between characters in the button text.<\/li>\n\n\n\n
                      • Style<\/strong> – Using the property, you can set the button text to be Italic or Oblique.<\/li>\n\n\n\n
                      • Transformation<\/strong> – It changes the case of the text, such as lowercase, uppercase, and capitalize.<\/li>\n\n\n\n
                      • Decoration – <\/strong>The styling is applied to the button text to make it more visually appealing. The options include underlining, overlining, and line-through.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                        \"Change
                        Change Button Styling<\/figcaption><\/figure>\n\n\n\n

                        For the Text Trigger type, the following styling options are available:<\/p>\n\n\n\n

                          \n
                        • Text Color <\/strong>– It changes the color of the text.<\/li>\n\n\n\n
                        • Typography <\/strong>– It allows you to control the text’s typography, such as font family, weight, font size, line height, and other related styling properties for the text.<\/li>\n<\/ul>\n\n\n\n
                          \"Change
                          Change Text Styling<\/figcaption><\/figure>\n\n\n\n

                          Modal<\/h3>\n\n\n\n

                          It changes the styling of the Modal appearing inside the popup window and comes up with the following options:<\/p>\n\n\n\n

                            \n
                          • Padding <\/strong>– It sets the padding value around the content of the text. Moreover, you can also set the padding value to be different on different devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                          • Background<\/strong> – It sets the background color of the modal box. You can change the visual appearance of the background by changing its color or adding an image. <\/li>\n\n\n\n
                          • Border<\/strong> – It customizes the Border area added around the Modal box and comes with the following options:\n
                              \n
                            • Type<\/strong> – You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                              When you select none, you will be given the following option:<\/p>\n\n\n\n

                                \n
                              • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners for borders.<\/li>\n<\/ul>\n\n\n\n

                                However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                                  \n
                                • Border Color<\/strong> \u2013 It allows you to choose the appropriate border color.<\/li>\n\n\n\n
                                • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                                  \"Styling
                                  Styling of Modal Block<\/figcaption><\/figure>\n\n\n\n

                                  Popup<\/h3>\n\n\n\n
                                    \n
                                  • Background<\/strong> – It sets the background color of the popup box. You can change the visual appearance of the background by changing its color or adding an image.<\/li>\n<\/ul>\n\n\n\n
                                    \"Change
                                    Change Popup Background Color<\/figcaption><\/figure>\n\n\n\n

                                    Advanced<\/h2>\n\n\n\n

                                    The Advanced section consists of four options for the Modal block.<\/p>\n\n\n\n

                                    Spacing<\/h3>\n\n\n\n

                                    Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                                      \n
                                    • Block Margin<\/strong> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                                    • Block Padding<\/strong> \u2013 According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different padding for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                      \"Manage
                                      Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

                                      Z-Index<\/h3>\n\n\n\n

                                      It allows you to set the priority of the Modal block according to the site requirement.<\/p>\n\n\n\n

                                      Responsive Condition<\/h3>\n\n\n\n

                                      Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                        \n
                                      • Hide on Desktop<\/strong> \u2013 It hides the Modal block on the Desktop.<\/li>\n\n\n\n
                                      • Hide on Tablet<\/strong> \u2013 It hides the Modal block on the Tablet.<\/li>\n\n\n\n
                                      • Hide on Mobile<\/strong> \u2013 It hides the Modal block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                        \"Enable\/Disable
                                        Enable\/Disable Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                        Advanced<\/h3>\n\n\n\n

                                        Under the option, you can set the CSS ID and Classes for this particular Modal block. The available options are listed below:<\/p>\n\n\n\n

                                          \n
                                        • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                                        • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n
                                          \"Add
                                          Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                                          After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                          A Modal Block allows you to create a modal window or pop-up box on a webpage. It’s the perfect block for displaying conditional content like signup forms, notifications, etc, that gets presented in a popup window without redirecting to a new page. After you have chosen the Modal Block, you\u2019ll get a block editing panel[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1643"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1643"}],"version-history":[{"count":47,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1643\/revisions"}],"predecessor-version":[{"id":2779,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1643\/revisions\/2779"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1643"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1643"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}