Menu icon Foundation
Modal Dialog on page load.

I have a form on a page and I want to use a Modal Dialog to generate a user message once the form has been submitted.

If the $_POST array is filled, I want to populate a Modal reveal depending on the content and display the Modal reveal.

If the $_POST array is empty, then the page loads with the Modal hidden as usual.

Is there a way to reveal the Modal on page load?

I've tried $('#myModal').foundation('reveal', 'open'); but the function does not open the Modal.

(see snippet 1.)

The alert fires, but the reveal is not displayed.

I've tried to use the ajax calls, but the documentation is a bit lacking.

(see snippet 2.)

This does call up a modal dialog, but it's empty and has a height of just a few pixels.

I have a form on a page and I want to use a Modal Dialog to generate a user message once the form has been submitted.

If the $_POST array is filled, I want to populate a Modal reveal depending on the content and display the Modal reveal.

If the $_POST array is empty, then the page loads with the Modal hidden as usual.

Is there a way to reveal the Modal on page load?

I've tried $('#myModal').foundation('reveal', 'open'); but the function does not open the Modal.

[code][/code]

The alert fires, but the reveal is not displayed.

I've tried to use the ajax calls, but the documentation is a bit lacking.

(See Snippet 2.)

This does call up a modal dialog, but it's empty and has a height of just a few pixels.

// Snippet 1.
<script>
  alert('Check');
  $('#confirmationDialog').foundation('reveal', 'open');
</script>
            

// Snippet 2.
<button data-reveal-id="myModal" data-reveal-ajax="http://threepwood/divo/wp-content/themes/magico/modal-confirmation.php">
    Click Me For A Modal
</button>

// Snippet 1.
<script>
  alert('Check');
  $('#confirmationDialog').foundation('reveal', 'open');
</script>
            

// Snippet 2.
<button data-reveal-id="myModal" data-reveal-ajax="http://threepwood/divo/wp-content/themes/magico/modal-confirmation.php">
    Click Me For A Modal
</button>

modaldialogpageload

I have a form on a page and I want to use a Modal Dialog to generate a user message once the form has been submitted.

If the $_POST array is filled, I want to populate a Modal reveal depending on the content and display the Modal reveal.

If the $_POST array is empty, then the page loads with the Modal hidden as usual.

Is there a way to reveal the Modal on page load?

I've tried $('#myModal').foundation('reveal', 'open'); but the function does not open the Modal.

(see snippet 1.)

The alert fires, but the reveal is not displayed.

I've tried to use the ajax calls, but the documentation is a bit lacking.

(see snippet 2.)

This does call up a modal dialog, but it's empty and has a height of just a few pixels.

I have a form on a page and I want to use a Modal Dialog to generate a user message once the form has been submitted.

If the $_POST array is filled, I want to populate a Modal reveal depending on the content and display the Modal reveal.

If the $_POST array is empty, then the page loads with the Modal hidden as usual.

Is there a way to reveal the Modal on page load?

I've tried $('#myModal').foundation('reveal', 'open'); but the function does not open the Modal.

[code][/code]

The alert fires, but the reveal is not displayed.

I've tried to use the ajax calls, but the documentation is a bit lacking.

(See Snippet 2.)

This does call up a modal dialog, but it's empty and has a height of just a few pixels.

// Snippet 1.
<script>
  alert('Check');
  $('#confirmationDialog').foundation('reveal', 'open');
</script>
            

// Snippet 2.
<button data-reveal-id="myModal" data-reveal-ajax="http://threepwood/divo/wp-content/themes/magico/modal-confirmation.php">
    Click Me For A Modal
</button>

// Snippet 1.
<script>
  alert('Check');
  $('#confirmationDialog').foundation('reveal', 'open');
</script>
            

// Snippet 2.
<button data-reveal-id="myModal" data-reveal-ajax="http://threepwood/divo/wp-content/themes/magico/modal-confirmation.php">
    Click Me For A Modal
</button>
James Stone over 5 years ago

There is documentation of how to do this in the F4 docs:

" You can also open and close Reveal via JavaScript:"

// trigger by event
$('a.reveal-link').trigger('click');
$('a.close-reveal-modal').trigger('click');

// or directly on the modal
$('#myModal').foundation('reveal', 'open');
$('#myModal').foundation('reveal', 'close');

source: http://foundation.zurb.com/docs/v/4.3.2/components/reveal.html

I did something similar recently, not on page load but on a button trigger event, I just replaced the contents of the modal on the fly with jQuery. I am not sure if you can leave it blank. I believe I had something in there to start with.

$('#some-modal').html("<p>some html to replace, I used handlebars to compile a template and place it here.</p>"); 

Dave Coventry over 5 years ago

This forum has made mincemeat of my post, I'm afraid.

:(