# Modal Window Shortcode (No Cookies, No Library)

> Adds a [wpide_modal button="Open"]...[/wpide_modal] shortcode that shows a button which opens its content in an accessible modal window, built on the native dialog element.

- Type: PHP
- Runs: Run everywhere
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: modal, popup, shortcode, accessibility
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-modal-shortcode/

## Code

```php
add_action( 'wp_enqueue_scripts', function () {
    wp_register_style( 'wpide-modal', false, array(), '1.0' );
    wp_add_inline_style( 'wpide-modal', '.wpide-modal{max-width:min(640px,calc(100vw - 32px));width:100%;border:0;border-radius:12px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.3);}.wpide-modal::backdrop{background:rgba(0,0,0,.55);}.wpide-modal__inner{padding:24px 24px 20px;}.wpide-modal__close{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;cursor:pointer;color:inherit;}.wpide-modal__close:hover{background:rgba(0,0,0,.06);}.wpide-modal h2{margin-top:0;padding-right:40px;}@media (prefers-reduced-motion:no-preference){.wpide-modal[open]{animation:wpide-modal-in .2s ease-out;}}@keyframes wpide-modal-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}' );

    wp_register_script( 'wpide-modal', false, array(), '1.0', true );
    wp_add_inline_script( 'wpide-modal', "document.addEventListener('click',function(e){var open=e.target.closest&&e.target.closest('[data-wpide-modal]');if(open){var d=document.getElementById(open.getAttribute('data-wpide-modal'));if(d&&d.showModal){e.preventDefault();d.showModal();}return;}if(e.target.classList&&e.target.classList.contains('wpide-modal')){e.target.close();}var c=e.target.closest&&e.target.closest('.wpide-modal__close');if(c){c.closest('dialog').close();}});" );
} );

add_shortcode( 'wpide_modal', function ( $atts, $content = '' ) {
    $atts = shortcode_atts( array( 'button' => 'Open', 'title' => '' ), $atts, 'wpide_modal' );
    $id   = 'wpide-modal-' . wp_unique_id();

    wp_enqueue_style( 'wpide-modal' );
    wp_enqueue_script( 'wpide-modal' );

    $title = '' !== $atts['title'] ? '<h2 id="' . esc_attr( $id ) . '-title">' . esc_html( $atts['title'] ) . '</h2>' : '';

    return sprintf(
        '<button type="button" class="wp-element-button wpide-modal-open" data-wpide-modal="%1$s" aria-haspopup="dialog">%2$s</button><dialog id="%1$s" class="wpide-modal"%3$s><div class="wpide-modal__inner"><button type="button" class="wpide-modal__close" aria-label="Close">&times;</button>%4$s%5$s</div></dialog>',
        esc_attr( $id ),
        esc_html( $atts['button'] ),
        $title ? ' aria-labelledby="' . esc_attr( $id ) . '-title"' : ' aria-label="' . esc_attr( $atts['button'] ) . '"',
        $title,
        wp_kses_post( do_shortcode( shortcode_unautop( wpautop( trim( $content ) ) ) ) )
    );
} );
```

## Notes

Add title="..." for a heading inside the modal. Escape, the close button and a click on the backdrop all close it; focus returns to the button.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Modal Window Shortcode (No Cookies, No Library)" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/