# Create a full-screen popup

Want to make a bold statement? Transform your Geolocation popup into a full-screen welcoming banner for your customers. Here's how:

<div><figure><img src="/files/4Wd2xKAXZYwKqwhbV4kK" alt=""><figcaption><p>Before</p></figcaption></figure> <figure><img src="/files/Q9GCFqODLrSSjOUbgbif" alt=""><figcaption><p>After</p></figcaption></figure></div>

CSS snippet:

```css
.md-modal__backdrop {
    background:
        -webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(0, 0, 0, 0.6)),
            to(rgba(0, 0, 0, 0.6))
        ),
        url('[YOUR-URL-IMAGE]');
    background:
        -o-linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
        ),
        url('[YOUR-URL-IMAGE]');
    background:
        linear-gradient(
            rgba(0, 0, 0, 0.6),
            rgba(0, 0, 0, 0.6)
        ),
        url('[YOUR-URL-IMAGE]');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.md-modal__content {
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}

.md-modal__header__title {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center
}

.md-modal__bodyContent p {
    text-align: center !important;
}
```

**Things to Note**:

* **Image background**: Replace `[YOUR-URL-IMAGE]` with the URL of the background image you desire. To find the URL of your image, navigate to `Content > Files` in your Shopify admin. Need more guidance? [Learn more about uploading files on Shopify](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads).
* **Background opacity with linear gradient**: The `linear-gradient` inside the `background` CSS property applies a semi-transparent black overlay on top of your image. This can make text overlaid on the image more readable against its background. If you'd prefer the image without this darkened effect, you can remove the `linear-gradient` sections from the CSS snippet.
* **Solid color background**: If you'd prefer a solid color as a background instead of an image, replace `url('[YOUR-URL-IMAGE])'` with a CSS color code (e.g., `#FF5733`).
* **Stay within the app**: Before diving into custom CSS, check Orbe's features in the Shopify Theme Editor. There might be options to achieve what you want without custom code (e.g., removing the close button, adjusting the button position, modifying font colors).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.orbe.app/developer-reference/snippets/create-a-full-screen-popup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.