> For the complete documentation index, see [llms.txt](https://design-packs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-packs.gitbook.io/docs/fundamentals/section-tutorials/modals-closing-a-modal-popup-from-a-link.md).

# Modals: Closing a Modal Popup From a Link

### What this does <a href="#what-this-does" id="what-this-does"></a>

Add `dp-modal=close` to the end of any link inside a popup, and the popup closes as soon as someone uses that link. They then carry on to wherever the link points. It works the same whether they click it, tap it on a phone, or press Enter on it.

Normally a link inside a popup leaves the popup sitting open on top of the page. That is no great problem if the link goes off to another page. But if the link is meant to take someone further down the page they are already on, the popup stays in the way and they never see what you sent them to.

There is no setting to switch on. Any link with `dp-modal=close` in it behaves this way, and all your other links carry on exactly as before.

### How to set it up <a href="#how-to-set-it-up" id="how-to-set-it-up"></a>

You are adding a short piece of text to the end of a link you already have. Nothing else about the block changes.

1. In the theme editor, open your popup section and click the block that holds the link — usually a **Button**.
2. Find its **Link** box.
3. Add `dp-modal=close` on the end of whatever is already in there. If the link has no question mark in it yet, join it on with a question mark. If it already has one, join it on with an `&` instead.

Two examples. A link that reads `#shipping-info` becomes `#shipping-info?dp-modal=close`. A link that already has a question mark in it, such as `/pages/sizing?ref=modal`, becomes `/pages/sizing?ref=modal&dp-modal=close`.

Type it exactly as shown, although capitals are fine — `DP-Modal=Close` works just as well. The question mark or `&` in front matters: it is what separates your instruction from the web address itself.

### Where you can use it <a href="#where-you-can-use-it" id="where-you-can-use-it"></a>

Any link inside the popup, in any block. The popup keeps an eye on its own contents, so it does not matter which block the link sits in:

* **Button**, **Buttons** and **Button group** blocks — in the Link box
* Links you have added inside a **Text** or **Rich text** block
* Links in any other block you have put inside the popup

It works in three sections: **Modal popup**, **Modal** and **Modal — small**.

Two things to watch. The link has to be **inside** the popup — adding the text to a link elsewhere on the page does nothing at all. And it works with either **Modal action** setting, so both *Link trigger* and *Timed appear* popups can be closed this way.

### Examples <a href="#examples" id="examples"></a>

**Send someone further down the same page.** This is the main reason to use it. Say a size guide popup has a “Choose your size” button at the bottom:

`#product-form?dp-modal=close`

The popup closes and the page slides down to the product form. For this to work you need to have named that spot first, using the **Anchor ID** setting on the section you want people to land on.

**Open a new tab and close the popup behind it.** Tick **Open link in a new window** on the button and add the text as usual:

`https://example.com/care-guide?dp-modal=close`

The care guide opens in a new tab and the popup closes on your own page, so nobody comes back to a popup they thought they had finished with.

**Just close the popup.** Handy as a second way out — a “No thanks, maybe later” link under a newsletter signup. Note the `#` at the front:

`#?dp-modal=close`

The popup closes and the page stays exactly where it was. The `#` at the front is needed because the Link box will not accept anything starting with a question mark, and a lone `#` means “close, and go nowhere”.

**Keep your campaign tracking.** A promotion popup where you want to know the click came from the popup:

`/pages/lookbook?utm_source=modal&utm_campaign=spring&dp-modal=close`

The popup closes and people land on `/pages/lookbook?utm_source=modal&utm_campaign=spring`. Only the `dp-modal=close` part is taken off — your tracking is left alone.

### If your link already has other bits in it <a href="#if-your-link-already-has-other-bits-in-it" id="if-your-link-already-has-other-bits-in-it"></a>

Only the `dp-modal=close` part is taken off. Everything else in the link is kept exactly as you wrote it, and it makes no difference whether you put it first, last or in the middle.

| What you put in the Link box              | What happens                                       |
| ----------------------------------------- | -------------------------------------------------- |
| `#shipping?dp-modal=close`                | Popup closes, page slides to `#shipping`           |
| `#shipping?userid=blue&dp-modal=close`    | Same, and `userid=blue` is kept                    |
| `#shipping?dp-modal=close&userid=blue`    | Same again — the order does not matter             |
| `/pages/faq?dp-modal=close`               | Popup closes, `/pages/faq` loads                   |
| `/pages/faq?topic=returns&dp-modal=close` | Popup closes, `/pages/faq?topic=returns` loads     |
| `#?dp-modal=close`                        | Popup closes, page stays put                       |
| `#shipping`                               | Nothing — no closing text, so the popup stays open |

One combination will not work: putting the text after a `#` on a link to a **different** page, such as `/pages/faq#shipping?dp-modal=close`. The popup closes and the page loads, but it will not slide down to `#shipping`. You do not need it in that case anyway — use a plain `/pages/faq#shipping` and the popup will be gone once the new page loads.

### Good to know <a href="#good-to-know" id="good-to-know"></a>

**It counts as closing the popup.** Using one of these links is treated just like clicking the X. On a *Timed appear* popup that starts the **Days until popup is displayed again** countdown, so someone who uses the link will not see the popup again until those days have passed. Worth bearing in mind on a link that goes off to another page: a plain link with no closing text leaves the countdown untouched, so the popup can still appear on the next page they visit.

**The spot you link to has to exist.** `#shipping?dp-modal=close` only slides the page if something on it is actually named `shipping`. You name a spot with the **Anchor ID** setting on the section you want people to reach. If nothing matches, the popup still closes but the page does not move.

**Do not put it in an Anchor ID box.** This text belongs in a **Link** box only. Anchor IDs get tidied up into plain dashed words, so `dp-modal=close` typed in one would come out mangled and would not work.

**Do not point it at the popup's own trigger.** If your popup opens from `#more-details`, then a link inside it reading `#more-details?dp-modal=close` will close the popup rather than reopen it — but it will not move the page either, because `#more-details` is what opens the popup, not a real spot on the page. Point these links at a genuine **Anchor ID** instead.

**It has to be spelled exactly.** The word after the `=` must be `close`. Anything else, such as `?dp-modal=closed`, is ignored and the link simply behaves as normal.

### If it is not working <a href="#if-it-is-not-working" id="if-it-is-not-working"></a>

**The popup stays open.** Check there is a `?` or `&` in front of the text, and that it reads exactly `dp-modal=close`. Then check the link really is in a block inside the popup, rather than in a section behind it.

**The popup closes but the page does not move.** The spot you are linking to does not exist yet. Open the section you want people to land on, set its **Anchor ID**, then use that same name in your link.

**The Link box will not accept what I typed.** The Link box will not take anything that starts with a question mark. Put a `#` in front of it: use `#?dp-modal=close` rather than `?dp-modal=close`. Anything starting with `#`, `/` or `https://` is accepted as it is.

**The popup has stopped appearing for me.** That is expected rather than a fault — your own click started the countdown described above. Open your shop in a private browsing window to see the popup again.