Modal on page load

Hello,

Thank you for Beans.

How would i make a modal appear on page load?

Or even better i would like the modal to appear when the user click on any field of a form.

thank you

Hi Alex,

I am not sure I understand what you want to achieve, triggering a modal when user click on a field would litterally prevent them form filling up the form, is that the intended behaviour?

To do so, you will have to start by enqueueing the UIkit Modal component via your child theme as such:

add_action( 'beans_uikit_enqueue_scripts', 'example_uikit_enqueue_assets' );
/**
 * Enqueue UIkit assets.
 */
function example_uikit_enqueue_assets() {

  beans_uikit_enqueue_components( array( 'modal' ) );

}

Could you kindly advise what would be the content in the modal?

Thanks,

Hello,

Yes I already enqueued the UIkit Modal component and managed to get the modal working on a button.

Indeed i want to prevent users from filling the form before first confirming the Modal / dialog.

This what I am trying to achieve: We have a page with a form, before a user can fill the form i want to display a modal with term and conditions and a confirm button (confirm button being the only way to close the modal). This is why I was suggesting to either display the modal on page load OR to trigger the modal when a field is clicked (in this case the modal should only show once) both soluton would work for me.

Looking forword to your help.

thank you

Hey Alex,

Here is a code snippet which will do what you are looking for:

add_action( 'wp_enqueue_scripts', 'example_modal' );
/**
 * Trigger a Terms and Conditions modal on the 'contact' page when an input is clicked.
 *
 * If the user accepts the Terms and Conditions, the modal closes and condition, else the modal
 * re-opens on the next input click.
 */
function example_modal() {
 // Stop here if we are not on the contact page.
 if ( is_page( 'contact' ) ) {
   return;
 }

 // Get the 'terms-and-conditions' page.
 $tnc = get_page_by_path( 'terms-and-conditions' );

  // Stop here if the page isn't set.
  if ( ! isset( $tnc->ID ) ) {
    return;
 }

 $content = str_replace( ']]>', ']]>', apply_filters( 'the_content', $tnc->post_content ) );

  // Add inline script to trigger the modal on input click.
 wp_add_inline_script( 'uikit', sprintf(
   'UIkit.$doc.ready( function() {
      var tnc = false;
      jQuery( "input" ).click( function() {
       if ( true !== tnc ) {
         UIkit.modal.confirm( %s, function() {
           tnc = true;
         }, true, {
            labels: {
             Cancel: "%s",
             Ok: "%s"
            }
         } );
        }
     } );
    } );',
   wp_json_encode( '<h2>' . esc_html( $tnc->post_title ) . '</h2>' . wp_kses_post( $content ) ),
   esc_html__( 'Decline', 'example-domain' ),
    esc_html__( 'Accept', 'example-domain' )
  ) );

}

A few notes to get it working:

1. This will only fire if on a page with the slug contact which you may change according to your need.
2. It will grab the content of the page with the slug terms-and-conditions which you may also modify according to your need. If not, then you have to create a page in the backend called "Terms and Conditions"
3. The modal is triggered on input click but it would be good to add the form prefix in the JavaScript selector to avoid potential conflicts with other input such as a search field for example.

The only difference from your requirement is that the user has the right to decline in which case it closes the modal. In that case, the modal will re-open if the user clicks on an input again.

Happy coding,

You guys are absolutely awesome!

Thank you!