2.0 Modal - Add ability to cancel hide

[ansman]

I require the ability to cancel the hiding of a modal when the user for example clicks on the backdrop or presses escape.

The reason is I wan't the user to press a done button to close (to make sure they understand the implications of closing it).

I'd like options for a confirmShow and confirmClose option which will be called before and which will abort the showing/hiding if that function returns false.

[mdo]

Hmm, unsure if that's something that should be within the scope of Bootstrap or not. That's certainly a valid use case, but seems like something you would do on your own end with whatever business logic you have set for yourself.

Let's see what @fat thinks though from the JS side.

[cgunther]

Looking to the current crop of lightboxes available, fancybox supports something like this via a modal option, which, when set to true, doesn't show a close button, doesn't respond to the Esc key, and doesn't allow clicking on the backdrop to close the modal. It relies on the developer coding some event that will trigger closing the modal.

Rather than two more callbacks, something like this might be a better idea.

[ansman]

Otherwise you could use jQuery.triggerHandler() and check for a return value.

This has the downside of only being able to trigger the event for one element but I can't really see opening multiple modals at the same time.

[ansman]

I created pull request #1237 if this is accepted.

[fat]

Can't you just set the backdrop option to 'static'and 'keyboard' option to false...

[ansman]

They only problem is that this will require more work on my end keeping track of stuff like that but I understand your concern.

[foca]

+1

My use case is that I'm showing a sign in form in a modal, and once the user submits the form I don't want them to close the modal until the server responds to the request. However, I don't have a problem with users dismissing the modal before submitting ("oh, I don't want to sign in/up now").

Given how the widget is built, however, it's impossible to pass the options after initialization. And since I only need to disable closing after the form was submitted…

Anyway, it'd be nice if the pull request was merged, since it doesn't add much complexity to the code, and it gives us flexibility to control this :)

[fat]

you can change a modals options at anytime.

$('myelement').data('modal').options is the raw options object. Just set backdrop to static and keyboard to false.

[foca]

That wouldn't work, though, would it? The events are bound when the modal is shown. What I need is to change that while the modal is visible.

1. User opens the modal.
2. User can at this point close the modal if they want to
3. User submits the form via Ajax. I disable closing the modals until the request finishes.
4. The request comes back, I re-enable closing modals.

Since the events are bound during "1" and I need to prevent them only after "3" happens, there's no way that accessing the raw options will help.

Since you are apparently adamant about not applying this patch, I just monkey patched my local copy with @ansman's triggerHandler's proposal and it works. I am curious about why it's such a bad idea to merge that, though, if you could spare a few minutes to explain. Thanks a lot :)

[fat]

Oh i see.. well a hack for you would be at #3 to do:

$('myelement').data('modal').isShown = false

then set it back to true when you want to allow people to close things again...

The reason i'm not too excited about adding this functionality is that i'm trying to keep everything as absolutely simple as possible. That means I'm making an effort to not accept every request for things which I consider to be somewhat out of the norm.

That said - I'm also trying to keep things really flexible, and I've made sure to expose the raw prototypes of all these plugins so you can subclass or mix your own methods right in.

$.fn.modal.Constructor.prototype

make sense?

[foca]

Hah, can't believe I didn't realize switching isShown :)

That works great, thanks.

That said, how I went about this was: I first did

el.on("hide.preventHiding", function() { return false })

When that didn't work, I looked at the source, and finding that this wasn't possible, I came here and found this issue. What I mean is, in jQuery-land is common for events returning false to prevent the default behavior. I have a nice little hack to solve my problem, but I still think this doesn't complicate much and goes a long way towards respecting POLS. Just my ¢2 :)

[JoyceBabu]

This would be a nice feature. I hope you will include it in 3.0. Sometimes the check has to be done depending on the form fields in the modal. It would be much easier to check for the condition during the hide event, than tracking the values on change and updating the settings.

[kadursandy]

$('#myModal').data('modal').isShown = false; is not working in bootstrap 3.
Please let me know the code for point 3 above with an example if you have

[hnrch02]

@kadursandy Just use events:

$('#myModal').on('hide.bs.modal.prevent', function (e) {
  e.preventDefault()
})

and when the modal should be able to close again:

$('#myModal').off('hide.bs.modal.prevent')

Also, please don't revive extremely outdated issues, which have not context today.

[icai]

+1