UIKit Modal Dialog


I'm trying to use a UIKit Modal Dialog on my site, but even with the UIKit example code, I can't get the modal dialog to pop up. Is something blocking modal dialogs from displaying?

<!-- This is an anchor toggling the modal -->
<a href="#my-id">toggle modal</a>

<!-- This is a button toggling the modal -->
button-modal

<!-- This is the modal -->

        <a></a>
        This Text is in the Modal Dialog

Here's my testPage where I'm doing this: www.schoolofpersonalflight.com/testpage


Hi David,

To keep it super lightweight, Beans doesn't load all the UIkit components 🙂 We have instead taken if further and let you load exactly the components you need on a per page basis. Here is the documentation where you can find which components load by default and it points you to the various articles explaining how to using Beans UIkit API.

In your example, you would have to add the following code:

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

 // You may add if statement here if you only want to load it on certain pages.
  beans_uikit_enqueue_components( array( 'modal' ) );

}

If you are using Beans Starter Child Theme, you may add the beans_uikit_enqueue_components( array( 'modal' ) ); directly in your beans_child_enqueue_uikit_assets() function.

Please don't hesitate to ask if anything doesn't make sense.

Thanks,

Write a reply

Login or register to write a reply, it's free!