Hi !,
Nice work with bootstrap 4 but I got some construction error with bootstrap 4.3. Error are in the header and in the footer where class have changed.

I will try to change this in a fork and create a pull request.

I'm getting an error I can't resolve pictured in the attached image. The error is in line 55.

I'm using BootStrap 5.1.0. I have tried other versions including rolling back to 4.x with no joy. Could you help me?

Thanks!

Pat

Description:
As described. (See screenshot above)

Solved by adding this in CSS:
.bootstrap-dialog-header { width: 100%; }

Probable cause:
bootstrap-dialog-header width was equal to its content width.
After changing the bootstrap-dialog-header width to 100%, bootstrap-dialog-close-button was able to right align to the end of the header.

I encountered the follow error while using BootstrapDialog.confirm() with Bootstrap 4.1.3:

Uncaught TypeError: e.querySelector is not a function

Tracing down the changes between boostrap 4.0 and 4.1.3 I got the following:

in bootstrap/js/src/modal.js in the current 4.1.3 package.

Hi,

Can you provide bootstrap-dialog.css.map
To fix the warning:
DevTools failed to load source map: bootstrap-dialog.css.map
or delete the reference at the end of the css file

Hi.
great job but in src/scss/bootstrap-dialog.scss should be variables of colours not static numbers like:

.bootstrap-dialog.type-primary .modal-header {
background-color: $primary;
}

Are you planning to support newer versions of Bootstrap. Using the latest version of Bootstrap-Dialog, v4.4.4, I am unable to open an instance of the dialog anymore.

Using the following basic code example with either Bootstrap v5.2.3 or v5.3.2, I get the error further below:

Code Example
BootstrapDialog.show({
size: BootstrapDialog.SIZE_WIDE,
title: "Loading Customer Request",
message: <br/>Customer Request search page is being loaded. Please wait . . .,
type: "type-info",
closeByBackdrop: false,
closeByKeyboard: false,
closable: true,
draggable: true,
})

Console Error
bootstrap-dialog.min.js:1 Uncaught TypeError: Class constructor On cannot be invoked without 'new'
at new BootstrapDialogModal (bootstrap-dialog.min.js:1:695)
at BootstrapDialog.realize (bootstrap-dialog.min.js:1:25348)
at BootstrapDialog.open (bootstrap-dialog.min.js:1:8047)
at BootstrapDialog.show (bootstrap-dialog.min.js:1:26338)
at CustomerLanding.aspx:1125:29
at dispatch (jquery.min.js:2:43090)
at v.handle (jquery.min.js:2:41074)

When I Update to Bootstrap 4.5.1 and open a Dilaog and Close it with clicking on the Backdrop,
the backdrop stays open.

With 4.5.0 it works

cuando utilizo la opcion de multiples modales, e intento cerrar el primero se pierde la barra de deslizamiento

Problem:
bootstrap-dialog-footer-buttons are stuck to each other with no spacing (See screenshot above)

Solution:
.bootstrap-dialog-footer-buttons > .btn { margin-left: 10px; }

Hello,

I wanted to load as ES6 Module in the Browser like this:

import '/node_modules/bootstrap4-dialog/dist/js/bootstrap-dialog.js';

but it is not possible, root is undefined in
bootstrap-dialog.js line 29

I think it is because "this" is not window when you use es6 modules

thanks for your work on updating the plugin!!
I only have the problem, which I do not achieve. close all open modal.

 $.each(BootstrapDialog.dialogs, function(id, dialog){
                    dialog.close();
  });

How is this achieved? in advance thank you very much and apologize for the bad english :P

Cant seem to get javascript functions to fire while they are loading in the popup window.
Any ideas what I can look at? No visible errors showing that would indicate an issue.

I'm currently using 4.4.2 but I am upgrading bootstrap from 5.1.3 to 5.2.3 and need to update your library to work with it.

Current CDN Url is:
https://cdn.jsdelivr.net/gh/GedMarc/[email protected]/dist/js/bootstrap-dialog.min.js

But changing that to V4.4.4 like below doesn't work. Is there another CDN URL that I can use?
https://cdn.jsdelivr.net/gh/GedMarc/[email protected]/dist/js/bootstrap-dialog.min.js

Hi,

We are loading the modal's content using:

message: $('<div></div>').load('Sapp?/crmcustomer.newcrminput');

In load page, to try it, we have a simple javascript code like this one :
`

`

When we execute "BootstrapDialog.show" the dialog appears but this simple javascript doesn't work.

Thanks for this amazing tool.

Hey, mainly wanted to create an issue to thank you for the package @GedMarc. Seems to be working as a drop-in replacement for bootstrap3-dialog after upgrading bootstrap4.

However, README still mentions the old package, and also your listing in bower has the wrong repo link:

Hi.
Cannot prevent modal close by backdrop click after modal shown.

Methods:
setCloseByBackdrop(false);
setCloseByKeyboard(false);

not works.

Method:
setClosable(false);

only remove "x" sign. Backdrop click still active.

http://jsfiddle.net/tpy5eogs/

Can you help me?

Bootstrap 5 is now released. Will you support it?

I have used this library this is working with bootstrap 4 but when I use bootstrap 5 it shows below console error on page load and also when popup button is clicked. Popup does not open.

In the code sample when bootstrap 5 CDN is used instead of 4 then there also popup is not visible.
http://jsfiddle.net/qu6r3shn/

Since btn-default no longer exists as a style (at least it doesn't show a button ...), the button shows up as text only.

Line 907 of bootstrap-dialog.js

Fix: add custom css or change to btn-secondary, btn-dark etc

Hello, I am trying to work with bootstrap version 5.1.3 through NPM but I see that the latest version is not on par with this one, could you update it please.
sorry to bother about the same thing every year #33

The close Icon is behind the title text (see also yr examples).
But it should be right aligned. To make this work i needed:

.bootstrap-dialog-header {
width: 100%;
}

bootstrap-dialog.js:1194 should be:

keyboard: this.options.closeByKeyboard,

Hello, I have a console error and the dialog doesn't shows with Bootstrap 4.3.1

Uncaught TypeError: Cannot set property 'scrollTop' of null

Do you find it ?
Thanks

at some point will we stop using jQuery? I would like to integrate the library with svelte or react without including jQuery

Remote.html

Hello, this is a message from remote.html!

Works in BootStrap3 but not in BootStrap4.

I updated bootstrap 3 to 4.3.1 and bootstrap3-dialog to bootstrap4-dialog.
I use BootstrapDialog.show({... data: 'pageUrl' ...}) to open dialog work.
But in this dialog page can't trigger any javascript.

I am trying to create multiple modal and the scroll of the first modal is lost

http://jsfiddle.net/cuq4zt13/

With Bootstrap 5.2 the modal has some alignment issue, i think it is because the HTML/classes for the modal changed in the latest version.

See attachment

sass
.bootstrap-dialog {
@each $color, $value in $theme-colors {
&.type-#{$color} {
.modal-header {
background-color: $value;
}
}
}

.bootstrap-dialog-header{
    flex: auto;
    .bootstrap-dialog-title {
        color: #fff;
        font-size: 16px;
    }

    .bootstrap-dialog-close-button {
        float: right;
    }

    .bootstrap-dialog-close-button button {
        opacity: 0.9;
        &:hover {
            color: #fff;
            opacity: 1;
        }            
    }
}

}

Hi,

The latest version on NPM is 4.1.0. Is it possible to update to the latest?

Otherwise, is there somewhere else I should point my package manifest to receive updates (preferably actual releases, rather than just master branch)?

bootstrap-dialog.js
line 232

//btn block makes buttons display: 'block'
BootstrapDialog.BUTTON_SIZES[BootstrapDialog.SIZE_WIDE] = 'btn-block';

What is the intended behavior here? Also, there is no class added to SIZE_EXTRAWIDE.

I suggest not basing the button sizes on the modal width, at least by default, since it is already possible to pass classes if you create the buttons manually.

Let me know if you want an example (although i can't do a jsfiddle until you update npm).