nakupanda/bootstrap3-dialog

Make use of Twitter Bootstrap's modal more monkey-friendly.

bootstrap3-dialog's Issues

Load HTML file

Hi !
I want to load html file in BootStrapDialog message ?How i can do this ?
Thank you !

Dialog losing Esc and hotkey when several dialogs are open

If you open several dialogs, the latest opened dialog is correctly handled : it is on the top and hotkeys are working (Esc + buttons hotkey).
When you close the uppest dialog, the one above appears, but all keybord actions do not work (neither Esc nor buttons hotkey). If you click anywhere on the dialog, then hotkeys are active again.

This problem appears even on the demo page (try for example "Message types" demo) for the following browsers : Firefox 30, Chrome 35, Safari 7.

The expected behaviour is that :

• the dialog that is "above" gets its hotkeys active, whereas "below" dialog hotkeys are inactive
• when a dialog that was "above" gets on the top again, its hotkeys are active again.

Edit : sorry, I was too focused on describing the problem, I forgot to tell how glad I am to use this plugin ! Thanks for sharing it.

Register package in bower.io

Hello, could you please register the package using the following command:

bower register bootstrap3-dialog https://github.com/nakupanda/bootstrap3-dialog.git

Thanks!

Regards,

Daniel

Vertical Centering

How can I make a vertical centering of the dialog (respect the window)?

javascript error in IE8

Hi,
In IE8, if you goto the demo page http://nakupanda.github.io/bootstrap3-dialog/ and click on the Examples -> Simplest. Then dismiss the dialog by click outside the dialog (not on the x), You will get js error in bootstrap complaining "Error: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus."

Thanks

Fix the height of the dialog

Love the library it is great. I was wondering if you could help me. I have a lot of html content to display in the dialog and want to limit it's height and have a vertical scrollbar.

I've tried using a css class as per your example to set the height but I'm guess the content pushes out the height so it's not working.

I appreciate this might be my lack of html knowledge rather than the library but any help would be great. (Maybe I should render this content in a textarea ? and pass that to the modal)

Thanks

John

NuGet

This is a really useful script, but why is it not available as a NuGet Package?

Ajax content and datepicker

BootstrapDialog.show({
message: 'loading...',
onshow: function(dialog) {

            $.getJSON('/MyCar/DisplayInfo', function(data){
                dialog.setMessage(data.html);
                initEditEventsListeners();
                $('.GOVNA').datepicker()
            });.....

if I have datepicker inside the modal dialog reloads everytime I click on the input to open it.
this is the datepicker plugin i am using

https://github.com/eternicode/bootstrap-datepicker

//ok fixed it wil inshowN instead, but sounds a bit strange onshow to be fired when fatepicker opens :-)
thanks for the grate plugin!

How to use bootstrap-dialog as Rails 4 confirm - add Gist to README

I made a Gist for how to do this.
https://gist.github.com/Genkilabs/bdcc5f62c5b46a8e0904
If you like it, drop it in the readme or docs somewhere.

How to use the spin on a button outside bootstrap3-dialog ?

Hello,

I am (happily) using bootstrap3-dialog. Among useful features I like the spin effect on buttons.
I wish to use it on buttons not belonging to a modal window. Of course there are bootstrap snippets to achieve that, but since I have bootstrap-modal JS and CSS loaded, I'd rather re-use.
How can I achieve that ?

Thanks for your answer
Ronan

alert div overzise

Trying to show form validation errors using alert class.

two weird display issues

I am trying to use this component for confirmation on deletion of records on my site. But i encounter issues. I have a header, sidemenu and some notifications floating on my screen at higher z-index than the body and it seems that the greyout does not cover them. Secondly, for some reason, when i open the dialog, my body get "slimmer" until i close the modal... here are two images with and without the modal opened to understand

please help

onClose event

Hi, it would be nice to have something like close/onClose/beforeClose event with a possibility to interrupt the closing.

BootstrapDialog.show({
    close:function(dialog) {
        if (checkSomething...) {
            return true; //close dialog
        } else {
            return false; //let live
        }
    }
});

I know I can achieve that using button action if I disable other closing options, but I would like to leave them enabled. If there is some other way, please let me know.
PS: Thanks for this amazing dialog :).

dialog is undefined in onshown event

I'm trying to access the dialog in the 'onshown' event, and I'm getting 'dialog is not defined' JS error in my console. Is dialog accessible in the onshown event? Note: in my onshown event, I'm doing a $.get ajax call, and in my callback function I'm trying to access dialog. Thanks!

$button.spin() on =< IE9

Just found bootstrap3-dialog, Thanks! I will for sure use it, but one of my browser target is IE9, the $button.spin() doesn't work (because =< IE9 do not support CSS3 animation?). Will you target IE9 and lower? Thanks.

Failed to run/bind button "actions" after a second open.

Steps to reproduce:
Create an instance of BootstrapDialog using new.
Open dialog
Close dialog (via button action)
Open dialog
At this point the buttons (and X on top right) don't work.

Bootstrap 3

A possible bug in the generated class attribute

Hi,

I noticed the following in firebug. Notice that the class attribute ends with a class, in. Just want to report this in case this is a bug. I am using code in master (downloaded yesterday).

id="cacfac61-7f21-4167-8000-2e993d8c7e38" class="modal fade bootstrap-dialog type-primary size-normal in" tabindex="-1" style="display: block;" aria-hidden="false"

A dialog shows up and then disappears within one second

Hi,

I am running into an issue that the inner dialog comes and goes within one second for some reason. After the OK button is clicked, a get request is sent to the web server. And when the get request comes back, I want to show another dialog, which comes and goes within one second. What am I missing here? Thanks.

    BootstrapDialog.show({
        title: 'System',
        message: 'this is a message.',
        closable: false,
        autodestroy: false,
        buttons: [{
            label: 'OK',
            action: function(dialog) {
                dialog.close();

                var url = $(event.target).attr('value');

                var get = $.get(url, '');
                get.done(function(data) {
                    // TODO problem: it auto closes itself within a few seconds for some reason
                    BootstrapDialog.alert('done');

                    // refresh the query result
                    $('#frmQuery').submit();
                });
            }
        }, {
            label: 'Cancel',
            action: function(dialog) {
                dialog.close();
            }
        }]
    });

realize() function doesn't create dom elements to monkey with

Based on the documentation, it seems like the intended behavior of the realize() function is to add the base modal elements to the dom for manipulation:

"but if you want to do something on your dialog before it's shown, you can manually call dialog.realize() before calling dialog.open()."

This is my code:

var testDialog = new BootstrapDialog({
        title: 'Choose a Banana!',
        message: '<div id="monkeyControl1" />',
        closable: true,
        autodestroy: false
    });
    testDialog.realize();
    $("#monkeyControl1").text("Banana eaten!");
    testDialog.open();

I expect I'd be able to muck with the monkeyControl div before I open the dialog.

Close button is incorrect if the browser doesn't support the character

The character used for the close button, "×", does not always render correctly. It would be better to use "&times;" (×).

License?

Is this project available under an open source license? I would be interested in using it but I don't see terms spelled out anywhere.

Thanks!

Redundancy of css and js files after install

Hello,

bower adds both combination of the js and css-files.
Please decide one combination. You can choose the combination:
bootstrap-dialog.css and bootstrap-dialog.js or bootstrap-dialog.min.css
and bootstrap-dialog.min.js in the main of bower.json.

  "main": [
    "dist/less/bootstrap-dialog.less",
    "dist/css/bootstrap-dialog.css",
    "dist/js/bootstrap-dialog.js"
  ],

or

  "main": [
    "dist/less/bootstrap-dialog.less",
    "dist/css/bootstrap-dialog.min.css",
    "dist/js/bootstrap-dialog.min.js"
  ],

With best regards
coderDem

Request for option

Hard-coded, as constant:
BootstrapDialog.ICON_SPINNER = 'glyphicon glyphicon-asterisk';
and I don't want to use that spinner icon, i'm using Font Awsome, so I gess that shuld be option too... also FA has it's own spin class, no need for you class.
So i guess, option, and let developer chose what icon(class), spin, or no spin, developer choise...

Since using latest code cannot load using RequireJS

This might due to my lack of knowledge but I was using a previous version of the BootStrap3-dialog no problem inconjunction with RequireJS no problem. I upgrade to the latest version as I needed the extra events and it's stopped working.

I've removed by shim configuration as it's now Require aware.

I can see it correctly run through lines :
define("bootstrap-dialog", function () { return BootstrapDialog; });

Yet when I call it in my script with the following configuration it comes back 'undefined'.

require([ 'app-utils', 'jquery', 'jquery-migrate', 'bootstrap', 'bootstrapMvc', 'bootstrap-dialog', 'bootstrap-datepicker', 'bootstrap-multiselect', 'app-helpers', 'app-global' ], function (utils) {

I've read in the require documentation that maybe the define statement shouldn't name the function and should also include it's dependencies but I've tried a couple of things and it made no difference so I revert back to the current code.

Could anyone help me with this issue ?

Updating TITLE post Dialog creation

Hey guys, can we add a shortcut to updating Title contents with a function call? Right now I am mucking something like this (notice request.done/failed as the example of the .find()):

BootstrapDialog.show({
        title: 'old TITLE',
        buttons: [{
            icon: 'glyphicon glyphicon-send',
            label: 'Run!',
            autospin: true,
            action: function(dialogRef){
                dialogRef.enableButtons(false);
                dialogRef.setClosable(false);
                dialogRef.getModalBody().html('Running ze AJAX!');
                var request = $.ajax({
                    url: "/something/",
                    type: "GET",
                    cache: false,
                    timeout: 20000
                });

                request.done(function( msg ) {
                    dialogRef.getModalBody().html('Finished: ' + msg);
                    dialogRef.getModalHeader().find('.' + BootstrapDialog.NAMESPACE + '-title').html('New TITLE');
                });

                request.fail(function( jqXHR, textStatus ) {
                    dialogRef.getModalBody().html('Failed: ' + textStatus);
                    dialogRef.getModalHeader().find('.' + BootstrapDialog.NAMESPACE + '-title').html('Bad TITLE');
                });

                var $button = this;
                request.always(function( msg ) {
                    $button.stopSpin();
                    $button.hide();
                    dialogRef.enableButtons(true);
                    dialogRef.setClosable(true);
                });
            }
        }, {
            label: 'Close',
            action: function(dialogRef){
                dialogRef.close();
            }
        }]
     });

anyway to add an option Resizable

I think it's missing one of the great option
Resizable
How easy to add it?

Comparison with bootboxjs?

I've been using Bootbox.js (http://bootboxjs.com/) and just happened upon this. It seems to be doing pretty much the same things, except Bootbox has been around much longer and has been supported since earlier versions of Bootstrap (other than 3).

What are the major differences?

Bootbox.js repo: https://github.com/makeusabrew/bootbox

An issue about the shakes

An opened dialog itself have a shake to left also because of the sidebar when the dialog was closed

I have html content and I'm getting a bunch of <br> tags in there, what am I missing?

Is there a setting for html content instead of string? I really don't want to strip the whitespace from my html to get this working.

Thanks.

prevent keypress trigger in select2 from closing BootstrapDialog prematurely?

Hello,

I have a modified version of a select2 box inside a BootstrapDialog. Due to how I'm using the select2 (as a typeahead input box rather than a dropdown) I have some extra code written in the onchange handler of the select2 that triggers a 'keyup' event and this event is closing the BootstrapDialog prematurely whenever an item in the select2 is selected.

Is there a way to stop this behaviour?

I tried setting closable, closeByBackdrop, closeByKeyboard to false and dialogRef.setClosable(false) inside the onshow handler, but to no avail. I wanted to try running preventDefault in the onHide callback but I don't know how to get to the event from dialogRef, plus I'm not sure if that would even work.

I love this plugin and would rather use it than bootbox (bootbox does not close prematurely.) I can provide code on the select2 if necessary?

Thanks much,
Joe

The page conent will shakes when opened a dialog

Because of the browser's scrollbar, when i opened a dialog, the browser's scrollbar will disappeared caused by the page width was changed.

AMD (RequireJS) support

I have been using this great dialogue, and with support for RequireJS, works great.

The only thing required is surround the JavaScript with the following:

-(function($) {
+(function(root, factory) {
+
+    "use strict";
+
+    // Set up appropriately for the environment.
+    if (typeof define === 'function' && define.amd) {
+      define(['jquery'], function($) {
+        return factory($);
+      });
+    } else {
+      // Browser globals
+      factory(root.jQuery);
+    }
+
+}(this, function($) {

     "use strict";

@@ -916,4 +930,5 @@
     };
     BootstrapDialog.init();

-})(window.jQuery);
+    return BootstrapDialog;
+}));

This just add support for AMD, don't change anything for the current usage.

(if you put instructions for build the min version or a build script, I can prepare a pull request)

Convert css to less and scss

In this case I think we should crete Grunt file the does build for css files.

Stand on mobile compatibility

Does bootstrap3-dialog work well on phones? What is the official stance on supporting mobile devices? If it works, does it work just because it does or is mobile support a target for this project.

I want to use this in a project of mine but mobile support is a must.

Stripping script tag.

Nice addition to bootstrap, one thing I noticed though is that it doesn't include content inside some tags, i.e script tag, that I already tried. Is this correct? Just tried this couple of days ago.

Thanks.

Cannot change type of dialog after it is created

msgbox.setType(BootstrapDialog.TYPE_PRIMARY) has no effect when the dialog is visible.

I was hoping to change the current dialog, and change from PRIMARY to DANGER; and change the text to a warning message. But the dialog does not change its visual appearance.

Not really an Issue

Just a question,
how can i place a modal within some element on the page,
for example, I'm using angularJs
and want to load my modal inside my controller i.e.

Thanks for yr help !

Close button doesn't seem to work after 2nd time opening dialog

Cool dialog plugin. I'm still playing around with it but it appears if I open the dialog object a second time the close button (the 'X') doesn't work to close the dialog. I can click outside of the dialog area and it does seem to close however.

Add package to Bower?

We use a Bower workflow for packages like this, any chance of this being added to Bower?

Fade in

Is there any way to turn off modal fade effect, (by dafault class="modal fade")?

wiring events dynamically

Hi,

I have one question about dynamically wiring events before a modal dialog is shown.
The following function first sends a request to a web server to obtain a form and then inject the form into the body of the modal dialog. Now I want to validate the form when the save button is clicked so I need to call wireValidationEvent() at some point. I tried calling it in onshow event handler as shown below, but it doesn't work. Where should I invoke wireValidationEvent()? Thanks.

        function showModalDialog(url)
        {
            var get = $.get(url, '');
            get.done(function(data) {

                var $textAndPic = $('<div></div>');
                if (data) {
                    $textAndPic.append(data.trim());
                }

                BootstrapDialog.show({
                    title: 'xxx',
                    message: $textAndPic,   
                    onshow: function(dialogRef){
                        // TODO this is not working
                        wireValidationEvent();
                    },
                    buttons: [{
                        label: 'Save',
                        action: function(dialog) {
                            dialog.close();
                        }
                    }, {
                        label: 'Cancel',
                        action: function(dialog) {
                                    dialog.close();
                        }
                    }]
                });
            });

            return true;
        }

Browser Vertical Scrollbar Issue

When I show a Dialog, my browser immediately shows a vertical scrollbar. It also does this when running the demos from your site.

Any ideas on why it would do that?

Modal-backdrop on multiple opened dialogs

If we open a second modal over an existant modal the backdrop doesn't overlay the previous opened modal.

The problem seems to be related to how modals and modal-backdrops are being appended to html.

Tiny CSS issue - scrollbar

The CSS does not provide a overflow: hidden.

It does create a scrollbar to appear on firefox (latest one).

So on the CSS please add:

.bootstrap-dialog {
overflow: hidden;
}

instead of

.bootstrap-dialog {

}

Except of course if there is any particular reason! Cheers!

Center dialogs vertically

Hi,

What is the recommended way of doing this? It would be nice to show this in the examples page. Thanks.

Does anyone know of an Angular JS directive for this project?

I love the use of this, but would prefer to use an Angular directive abated of the jQuery method. Has anyone made one?

scrollbar mousewheel event not working in Chrome and IE

I added a class "performance-dialog" to cssClass of BootstrapDialog. The css is as below:

.performance-dialog .modal-body {
height: 400px;
overflow-y: auto !important;
-ms-overflow-style: scrollbar;
}

The scrollbar works fine in FireFox.
But in Chrome and IE, the scrollbar cannot scroll by mouse wheel.
Can someone help me with this?

Nuget Package

This library is awesome. I love the code. It would be nice if there was a Nuget package for it.

Add draggable feature

I think it would be nice to have one more option: "draggable"

How to test BootrapDialog with Jasmine

Hello,

how you test BootrapDialog with Jasmine?
Or how do you test the BootrapDialog?

Best regards
coderDem