Prevent Foundation Modal window from closing when clicking in the background

bfarkas

I have a modal window for a editor instance that launches off of a button. I don;t want this to close when the user clicks off of the form, I am using the foundation framework, which allows this through a data attribute, but I don;t know how to have that be inserted when the modal is formed from the button. THis is the button code:

{
                text:   'Personalize your nests',
                key:{ key: 'p', shiftKey: true },
                editor: nesteditor,
                action: function () {
                    var indexes = p200table.rows( 0 ).indexes();
 
                    nesteditor.edit( indexes, {
                        title: 'Instructions',
                        message: 'Use the fields below to create the names of your personal Nests. Once you have saved them here, these names will be available to tag contacts with. This will help you fill in your nests with contact information.<br /> <strong><i>Note:</strong> You must define your nests before you can begin entering contacts.</i> <hr><br />',
                        buttons: 'Update'
                    } );
                }
            }

The Plugin-options section of the foundation documentaiton says that there is a 'data-close-on-click' which if I set to false solves this:
https://get.foundation/sites/docs/reveal.html

Thoughts?

allan

We actually override Foundation's background click behaviour using:

            self._reveal = new window.Foundation.Reveal( self._dom.content, {
                closeOnClick: false
            } );

The reason for doing that is that we can present a unified API for this behaviour regardless of which styling library is used. The option you want in this case specifically is the onBackground option of form-options.

Changing your code from above slightly to be:

                    nesteditor.edit( indexes, {
                        title: 'Instructions',
                        message: 'Use the fields below to create the names of your personal Nests. Once you have saved them here, these names will be available to tag contacts with. This will help you fill in your nests with contact information.<br /> <strong><i>Note:</strong> You must define your nests before you can begin entering contacts.</i> <hr><br />',
                        buttons: 'Update',
                        onBackground: 'none'
                    } );

Should do the trick.

Allan

bfarkas

Ah, makes perfect sense and worked perfectly, thanks!