'closeButton: false' not working when not using context API

[nicelion]

Is it possible to apply styling to the window, or even setting closeButton: false for that matter.

This is my code:

modal.set(
     bind(WarningModal, {
                title: "Heres a title",
                message: "Heres a message",
            }, {
                closeButton: false
            }
        )
    )

This code will show a modal with the props passed, but does not remove the closeButton or apply any windowStyling.

Is this feature only available to those using the contextAPI?

[flekschas]

The bind() method binds props to a component. It only has two parameters. See https://github.com/flekschas/svelte-simple-modal/blob/master/src/Modal.svelte#L2

If you want to change other properties of the <Modal /> (like styling the window or disabling the close button) dynamically, then you have to change those properties manually as well. E.g.,

modalCloseButton.set(false);

and do

<Modal show={$modal} closeButton={$modalCloseButton} />

[nicelion]

Okay, that makes sense. I am able to get your example working using the closeButton, however, I am still not able to apply styling to the window. Please see my code below:

// store.js
export const modalStyling = writable(null)

// App.svelte

<Modal show={$modal} styleWindow={$modalStyling}>
...
</Modal>

// Outside Component

modal.set(bind(Popup, {
  title: "Here is a title",
  message: "Here is a message"
}))
modalStyling.set({
    fontSize: '20em'
})

This results in an error:

Modal.svelte:77 Uncaught (in promise) TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at toCssString (Modal.svelte:77)
    at updateStyleTransition (Modal.svelte:85)
    at open (Modal.svelte:106)
    at Object.$$self.$$.update (Modal.svelte:194)
    at update (index.mjs:761)
    at flush (index.mjs:733)

Thank you so much for your help in advance!

[flekschas]

Oh that definitely looked like a bug! Thanks for finding it. I'll take a look.

[flekschas]

Simple fix: export const modalStyling = writable({})

null is not an object so it can't be serialized.

[flekschas]

FYI, I improved this handling in the new version (0.10.3) so even if you pass in null you won't get an error anymore.

[nicelion]

Ok so I am still having issues with styling the window! Sorry for taking so long to readdress this issue, I've been busy with a bunch of other stuff!

So I've updated to 0.10.3 and I am no longer getting that error message. However, none of the styling appears.

// store.js
export const styleWindow = writable({})

// App.svelte
 import { modal, styleWindow } from '../stores.js'
<Modal styleWindow={$styleWindow} show={$modal} >
...
</Modal>

// Outside Component
import { modal, styleWindow } from '../stores.js'

modal.set(bind(WarningModal, {
    title: "Uh Oh!",
    message: "Heres a test message"
}))

styleWindow.set({
    background: 'red'
})

The modal will appear, but there is no styling on window. Just a plain white background. Not sure if there is a mistake in my code or not!

Side note: I did see another user created an issue with something similar. I am able to style the window setting it manually on <Modal styleWindow={{background: "red"}} show={$modal} just not when trying to set it using a store.

Thanks again for your help.