erobertson42 / bootstrap-modbox Goto Github PK

Testing in Safari 15.5 (17613.2.7.1.8)
Confirm always runs the action defined for the cancel button. You can see it in your examples as well: https://erobertson42.github.io/bootstrap-modbox/examples.html#confirm

It always logs: okButton not clicked in the console.

Seems to be only Safari problem though, as it works fine in Chrome/FF.

Hi Eric,
i'm trying to use your npm package in a Meteor application.

import * as bootstrap from "bootstrap";
import 'bootstrap-modbox';

But the client does not load at all saying

Uncaught ReferenceError: bootstrap is not defined
    at Function.<static_initializer> (modules.js?)

pointing at #defaultOptions={...bootstrap.Modal.Default line of your class.

Any idea what might be wrong?
Adding console.log(bootstrap.Modal.Default) after the first import line shows expected output without errors.
Cheers,
Milos

I realise I could use the custom modal for this, but it would be nice if I could set these 3 modal types to not auto-open.

In my particular use-case, when I am running an XMLHttpRequest / Fetch, if I know it is going to take a few seconds, I like to show an alert when the request starts, and then hide it when the request finishes.

In the past with something like Bootbox, I have used an 'alert' set to not auto-show, then in my onLoadStart function, I 'show()' the modal, and in the onLoadEnd function, I 'hide()' the modal.

If I could do something like

let myModal = modal.alert({ message: "Test", show: false });

xhr = XMLHttpRequest();
xhr.onloadstart = (e) => { myModal.show(); };
xhr.onloadend = (e) => { myModal.hide(); };

That would be perfect.

Right now I am doing

let myModal = new modbox({
  title: "Alert",
  message: "Test",
  destroyOnClose: true
});

xhr = XMLHttpRequest();
xhr.onloadstart = (e) => { myModal.show(); };
xhr.onloadend = (e) => { myModal.hide(); };

And while it works, it's basically just duplicating what modal.alert already does with the exception of being able to show/hide on command.

It would be nice to be able to override the defaultOptions for each of the default modal types.

For example:

modbox.defaultOptions.title = ''

This sets the default title to nothing.

But when using:

modbox.alert('test')

The title is set to 'Alert'. Is it possible to add an option like this?

modbox.defaultOptions.alert.title = ''

or

modbox.defaultOptions.confirm.title = ''

Ps. I'm aware of this option:

modbox.alert({title:'', body:'test'})

There needs to be an option for hiding the X close button on the header when desired.

Hi, thanks for creating this library!

When using the callback on the button on a confirm, this does not point to the button, but instead to the button that triggered the modal. Is this intended and did I get the documentation wrong? Or is there a bug in the code?

$('#mark-completed-as-implemented').on('click', function () {
  modbox.confirm({
    body: 'Are you sure you want to mark all the completed requests as implemented?',
    title: null,
    center: true,
    okButton: {
      label: 'Yes',
      style: 'success',
      close: false,
      callback: (event, modal) => {
        console.log(this); // This does not point to the button, but to #mark-completed-as-implemented
        $(this).prop('disabled', true).append('<i class="fa-duotone fa-spinner-third fa-spin ms-2"></i>');
        sendAjax('mark_completed_as_implemented', { app_id: app_id }).then(response => {
          if (!response.success) {
            bs5_toast(response.data.message, 'error');
          } else {
            bs5_toast(response.data.message, 'success');
          }
          $(this).prop('disabled', false).find('.fa-spinner-third').remove();
          modal.hide();
        });
      },
    },
  });
});