jschr/bootstrap-modal

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

bootstrap-modal's Issues

Support for option for black/white modal backdrop.

Would nice to have the option param on modal() to choose the color of the backdrop instead of shifting all of them to white.

an enhancement possibly - using scrollbar to scroll down when modal is bigger than screen

I noticed that when the modal is bigger in height than then the screen that we cant use the scrollbar to scroll down, we have to use the mouse wheel
I'm not sure if its possible but if the scrollbar can come back in front of the backdrop when the modal got to a point that we can scroll the modal it might help some people scroll down the modal instead of having to use the mouse wheel

fluid layout messed up centering of modal

Screenshot:
http://www.evernote.com/shard/s178/sh/be795282-b3e5-4540-8c35-81c5f20244ec/51fd62bd4f68b5ca278eb3e2c95f3cf9

I'm switching my entire site to be responsive and now I've found this issue. Basically, the modal is getting centered on the span9 instead of the window.

Demos don't work on iPad running iOS 6

I go to http://jschr.github.com/bootstrap-modal/, tap any of the view demo buttons, and nothing happens.

Include Bootstrap-Scroll-Modal

Any chance you would consider including https://github.com/aroc/Bootstrap-Scroll-Modal ?

Dynamic way to generate the target

Is there a way to generate the target for $modal.load using the AJAX (via jQuery.load) method ? I've tried to use the href of the link itself and data-target with no luck.

Modal hide & destruction

Could more documentation or examples be provided? I ask because it seems that modals continue to hang around within the DOM despite execution of the Modal.destroy()

How to implement custom spinner?

I've tried numerous variations of "spinner" without any success. What's the proper implementation?

Thanks!

Software license?

Hey Jordan. I've been using bootstrap-modal in my app and think it's a great improvement over the standard modal implementation. However, I noticed that there is no copyright or software license specified anywhere in the github source repo, so it's not clear what the terms of use are for this code.

Can I use and redistribute this code freely with my application? Better yet, can you add license text (MIT or whatever you want) to the source?

Thanks.

2.0 breaks tabs in the modal after modal is reloaded

so I got adventurous and tried the new 2.0 of the modals..
I had to upgrade my css due to some changes there, and then exchange the manager and modal js files to the 2.0 version
I then changed all the GlobalModalManager.loading(div); to $('body').modalmanager('loading')
and I went to testing it out..
I have one modal that uses ajax to load its content -

$("body").append(div);
$.get('/My/Goodies.php', {what : what, id : id}, function(ret){
    div.html(ret).modal().drags({handle: '.modal-header'})
})

and within the content thats loaded is a bunch of tabs the user can browse through to find a gift to send to another use.. The tabs work fine when the modal is first loaded, but if we close it and reopen the modal the tabs no longer function, but it does in the current version (before 2.0)

thats the only bug I found with how I've been using the modals.. If you'd like to see an example I can try to throw one together.. other than that I love how they're acting now! the scrollbar being on top for long modals is awesome, and it also brings my navbar back on top (which is what I had before I upgraded to use your modal plugin)

implement option draggable

$(".modal").draggable({
handle: ".modal-header",cursor: "move"
})

thank

Changing height of modal contents. Would like to also reposition it too.

This may or may not be possible. I have a modal that I open up. Within it, I have several 'wizard' type screens. The users clicks buttons 'Next->' through each screen and I just hide/show div's. Each screen has a different height. I'd like to 'redraw' the modal in the center of the window relative to the height of each modal-content. Since this is currently controlled with CSS the browser isn't recomputing the height so I can't just change the top setting. Thoughts?

Is the project works well with boostrap version 2.2.1

Actually, it's not a question.
I wonder does it works well with the latest boostrap.
cause i found the bootstrap-modal.js in the project is v2.0.
why not just use the latest boostrap-modal?

Thanks,
David

Bootstrap Tabs inside Modal

When using Bootstrap Tabs inside Modal, switching tabs inside modal causes the backdrop to appear once more.

Sadly, my js knowledge doesn't allow me fix it myself.

Ps: Thanks for the awesome plugin.

Events clashing

For me, custom events like show, hide, etc. are clashing with bootstrap-modal's events by the same name. I've appended .datepicker to all of that project's custom events and .modal to all of this project's events*. This sorts the problems I was noticing.

* - For some reason I can't change $.Event('show') (bootstrap-modal.js:57) to $.Event('show.modal'); it breaks .modal('show') (with no console errors) and I've no idea why.

I would issue a pull-request with the custom event name change but I can't because of the above issue. Does it even make sense that changing that line would break .modal('show')? I would think that's just the name of the event to be triggered, not the param name too.

ajax loading image in wrong place with smaller width

on your demo when I have the width of the page smaller than 1200 and I open the ajax load, the loading image is in the correct place, but when I click update it puts the loading progress bar at the top left of the modal.. =/

Is tagging possible, for versioning reasons?

Hi @jschr,

I see now that the readme says v2.0, and based on wip-2.1, I guess that v2.1 is currently a work in progress.

Any plans for tagging, so one could reference specific release points?

Loading state

Is there any way to toggle the loading state and prevent it from closing when the user clicks anywhere in the window ?

Problem to set focus

Hi!

I have a question.. in my application I use your bootstrap-modal, and I can't set focus on the DOM element in the modals. I have been used $("#txtCEP").focus(); but don't worked.. is it normal? thanks!

Elements behind the overlay are still focusable - so it's not really modal.

The overlay does not really block the content behind. E.g. the elements behind still get the focus when using TAB and navigating between them.

IMHO this is a serious bug, since "modal" should be really modal, and not just "visually modal"
Btw. many "popup"/overlay frameworks are affected by this, and only few are getting it right :).

.body Loading State Causes Scroll Bar to Vanish

When $('body').modalmanager('loading'); is called on a page that has a scroll bar on the right, the bar is hidden until the loading state is cleared.

Upon clearing, the window contents shifts and disrupts the UI.

Can we remove the scroll bar being hidden in any way?

An explanation of the mechanics to accompany the examples.

From the examples, it's a bit unclear how stack modals when loading them through ajax. It would be nice if the documentation explained a little bit of the mechanics involved. The examples, while they do a great job of showing the plugin's capability, they do very little to explain how this is done.

Modal dialog closes immediately after initialization in Google Chrome

When the modal has finished initializing, it immediately closes again (like with issue 20)

The modals function as expected in IE9, but shows this behavior in Chrome 23.0.1271.64 m (Local fork of bootstrap 2.2.1).

Might be worth noting I am calling my modals using data-toggle and not with manually entered javascript hooks.

HTML property data-maxHeight is transformed to the "maxheight" option (in lowercase)

Line 252 : on Firefox 16, $target.data() returns a javascript object with all properties in lowercase.
So, later, the "maxHeight" option is never found.

I propose to use the "maxheight" option instead.

backbone events in modals

Backbone events doesn't fire when attached to a data-dismiss="modal" button. I'm trying to submit a form via a backbone event and dismiss the modal at the same time, but it doesn't work with backbone-modal. With the default class it works.

I fact, if i remove the data-dismiss, the backbone action does not fire, instead the default action fire (form submit via GET request, instead of the js call the backbone event had defined)

Can't call .remove() in a 'hidden' event handler

The modals in my application are attached to the body dynamically, and should be removed after they are closed as well. With the normal bootstrap-modal functionality, I could do that like this:

m.modal('show').on('hidden', function(){
$(this).remove();
});

With the jschr-version, the hidden-event gets triggered and the function executed, but the modal is still attached to the body.

Aviary issue with .modal-open { position: relative; }

I'm using this library with the aviary image editing plugin.

.modal-open {
     position: relative; /* safari */
         ..
}

This line was causing the aviary dialog to appear almost off the page at the bottom.
I've simply commented the line out and find safari seems ok without that line.

Content of a page is scrolling on mobile brosers

try to scroll on mobile browsers - content is scrolling! )

Installation instructions are missing

I think this project needs an installation instructions section, either on the README or on a wiki page.

Background fade issue

Hello,

I am using the latest version of bootstrap and your plugin (updated it today).

I am using Bootstrap's Tabbable Nav feature as shown on this page: http://twitter.github.com/bootstrap/components.html

However, when I switch between tabs, the faded background of the page behind the modal continues to get fainter and fainter. Then, when you cancel the modal, you can't access anything on the page behind. It continues to be faded out and you have to refresh to see the page again.

As soon as I disable your bootstrap-modal and bootstrap-manager files, it works fine, but of course I want the best of both worlds. :)

I have seen the fix here: #2, however it doesn't work for me. The only thing I can think of here (unless I'm making a mistake) is that my modal content is loaded via ajax.

Hope you can help!

Henry

backbone, underscore and modals

Hello

I'm having the disappearing problem like in #20 in all devices and browser i have (safari,chrome, ie, firefox, and ios). The demo page works, but mine doesn't.

I think it might be related to the backbone library usage. Also, modals are defined on templates which are rendered by underscore.

I can't fully test unless i rewrite the application. I would like some advice to debug this, log events in firebug and console.trace() haven't shown results for my eyes ;)

thanks

Multiple modals stacking, losing close binding issue.

I've encountered an issue where I 'show' a modal through another modal through $(object).modal('show') after you close all the modals all the way that it loses the 'hide' event binding after a few modal instances (show, hide, etc).

My work around right now is to basically use the href on the button to show the second modal as doing it programmatically would create the issue mentioned above.

I hope this gets fixed in the future, thanks guys!

p.s. if for some reason, there's a better programmatic workaround, let me know. Thanks.

"Loading" disappears when clicking in the document

Try the Ajax example; when the "loading" is shown, click anywhere in the document => the loading disappears.

BS 2.2.0

First off... great work. I'm switching all my modals to use your code now, you've done a great job.

Now that 2.2.0 is out, there is a couple changes in it that I need.

First off is focus(). I need focus() to be called before the shown event is executed, not after. This is a change that is in 2.2.0.

Second, it appears they now tie things to $(document) instead of $('body'). That makes sense.

If you'd like I can submit a pull request, but I'd like you to see if there are any other changes that are necessary as well.

Thanks again.

demo page can get into a weird funk

Someone on HN reported it and I was able to reproduce it.

Start with the AJAX demo and then try clicking on the Responsive demo.

The Responsive modal appears for a second and then goes away.

Installation detail for combination with Bootstrap NuGet package missing.

If it's installed full Bootstrap NuGet package with minimized default bootstrap-modal.js, I need only your bootstrap-modalmanager.js, or your bootstrap-modal.js it's refactored and your bootstrap-modalmanager.js need your bootstrap-modal.js?

double click disable modal

You can click twice in any button, and the behaviour will be weired. The expected behaivour is that is a modal is being show, it doesn't reset.

Issues with multiple overlays

When you create modals out of modals (see the stackable example), the background gets dimmer and dimmer. Is there a way to limit it to only one overlay, no matter how many modals have displayed?

Cannot read property offsetWidth of 'undefined'

I'm getting that error on this line:

// around line 212 in bootstrap-modalmanajer.js
this.$loading[0].offsetWidth

When I execute this:

GlobalModalManager.loading();

I suspect that [0] behind $loading has something to do with this error.

Load a Modal with remote contents

Hi,

I have this modal:

<a data-toggle="modal" data-remote="/users/6" data-target="#student_report">
        User 1
</a>

<div class="modal hide" id="student_report">

</div>

I want to be able to load the entire contents of the modal using ajax. Right now it just replaces the modal-body element.

How can I configure bootstrap-modal to put the contents in .modal?

Thanks!

Bower support

Could we get support for bower?

If I get a chance this weekend I'll submit a pull request.

Rails gem

I'm finishing up a Rails gem version of this. I added you as a contributor, so, feel free to contribute.

https://github.com/cmckni3/bootstrap_modal_rails

Modal dialogue disappears immediately after loading.

This is happening for all except the Ajax modal. I am using Chrome version 23.0.1271.64.

Issue replication:

http://www.screenr.com/su27

bootstrap-modalmanager depends on DOM ready but it's never checked.

First lines
var $baseModal = $('

').appendTo('body'),
$baseBackdrop = $('

').appendTo('body'),
$baseModalAbs = $('

').appendTo('body'),
$baseBackdropAbs = $('

').appendTo('body');

depend on the DOM being loaded, but it's never checked.

It works in the example since the scripts are loaded in the bottom of the page, so the static DOM is already accessible.

If you load bootstrap-modalmanager.js in HEAD, appendTo('body') will fail silently.

Multiple Non-Stacking Responsive Modal Conflict

I've got three modals that I'm currently differentiating by id

<div class="modal hide fade" id="myModal1" tabindex="9999" data-width="760"></div>
<div class="modal hide fade" id="myModal2" tabindex="9999" data-width="760">...

and I'm looking to make them all responsive. Has anyone else come across this problem?

How to control stack order of modals that are dynamically loaded

This is more of a question than an issue.

I am using AngularJS's ng-include directive to download a few modals from the server. I am then showing/hiding them with $.modal('show') and $.modal('hide'). It seems that the stack order is random. I cannot seem to influence it with z-index, tabindex, or anything else.

What controls the stacking order of modals as they are hidden and shown?

Associate ModalManager on non-body element

Perhaps I missed something in the documentation, but is there an out of the box way to associate ModalManager with an element inside the body, rather than the entire body? An example of usage:

 <body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container info">
        <p>Content</p>
    </div>

 <script>
$('.info').modalmanager('loading');
</script>

 </body>

This would result in the loading graphic only being loaded into the ".info" element, leaving the navigation at the top uncovered. On a side note, I'm having trouble using "spinner". Any advice would be appreciated.

Thanks

not responsive on mobile

this isn't responsive and doesn't work on devices without support for fixed positioning

you might want to take a look at grabbing what you can from my project for abs positioning:

http://niftylettuce.github.com/twitter-bootstrap-jquery-plugins/

ruby on rails examples

would be nice to have a few ruby on rails examples. specifically with ajax.

im working on getting it implemented so i can post some results to wiki once done. or if anyone else has any examples already

Chopped off top

It is possible to get the modal into a state where the top is chopped off at the top and there is no way to scroll up to see the top of it.

Basically, if you resize the window to be almost the exact height of what the modal would open up to and then open the modal, you can see in the image that part of the top gets chopped off and I can't scroll up anymore to show it.

http://www.evernote.com/shard/s178/sh/140ba535-e5a1-44d5-9702-5753be82c4a8/ae1007220cd598b8efb7ea4edc4d70c0

I hope this is enough information to let you debug it. Let me know.