CODEWITHSUNDEEP
jqueryasp.net-mvctwitter-bootstrap
Gerry
Gerry

Reputation: 886

bootstrap modal stopped functioning after update to bootstrap 3.3.0

Stumped.

I have a standard modal (pretty much exactly as done in the bootstrap demo pages) that's called using the button below - 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
           Login or register
</button>

and the modal markup

<div class="modal fade" style="display:none;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Login or register</h4>
            </div>
            <div class="modal-body">
                ...code....
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

This has been working with no issues until this evening. I updated VS 2013 express to community, updated bootstrap to the latest version (shows 3.3.0 on my VS 2013) and that's it. I diff'd my .cshtml file and there's no changes there.

Now when I click the login button, the modal pops up but greys out the whole page, and I cannot edit the input fields in the form. And when I click anywhere on the modal is just closes.

No idea where to even begin to debug this... anyone have any ideas?

(the jquery version is 2.1.1, bootstrap 3.3.0)

thank you for your help

update

Seems it's something to do when I moved from bootstrap 3.2.0 to 3.3.0. I reverted the bootstrap.js and bootstrap.min.js back to 3.2.0 and the modal works again. I'm going to leave this question as is - perhaps there's a fix on the way that I can download via nuget on vs 2013 and this goes away.

Upvotes: 1

Views: 3355

Answers (6)

NerdNoob
NerdNoob

Reputation: 50

Summary: When upgrading Bootstrap versions make sure that you are upgrading both the js and the css files.

Even when upgrading between minor versions.

It's easy to forget to upgrade the Bootstrap css.

Background: I was upgrading from Bootstrap v3.3.6 to Bootstrap v3.4.1 I upgraded the js and most things kept working fine.

But one thing that was not working correctly was the modal pop ups. If I removed the "fade" class from the modal div then the modal would sort of work, there were still issues with it. The light gray semi transparent background became a dark gray non transparent background. Once I realized that I was using the Bootstrap v3.3.6 js with the Bootstrap v3.4.1 css I upgraded the css to the correct version and if fixed my issues. I didn't have to use the temporary fix of manually removing all the fade class.

Debugging: If you are not sure if there is a version mismatch between your Bootstrap js and your Boostrap css you can right click inspect the page, go to the Sources tab, and look for your Bootstrap files in the left side bar. If the files were not named with the version information (bootstrap_3.4.1.js etc) then click the file to open it in the center window and the Bootstrap version information is normally the first few lines of the file. Samething for both the js and css files.

Hope that helps.

Upvotes: 0

jakobdo
jakobdo

Reputation: 1302

http://getbootstrap.com/javascript/#modals-options

Remote: This option is deprecated since v3.3.0 and will be removed in v4.

Upvotes: -1

Max
Max

Reputation: 2552

I've just run into the same problem a few minutes ago... Finally I've just found out the problem was related to some custom CSS code I wrote overriding the z-index on Bootstrap's .modal and .modal-backdrop classes.

I just removed the overriding of those CSS classes and now everything is working fine.

You possibly have done something similar with custom code on z-index

Upvotes: 0

dude2511
dude2511

Reputation: 63

Just use z-index: 1040; for class .modal-dialog and it should work properly again. You could edit bootstrap's css file, define your own css file, or put it as an inline style to your modal dialog div. If you use LESS/SASS sources, even better.

P.S. At least it worked for me without further testing or analyzing.

Upvotes: 1

C&#233;sar Gonz&#225;lez
C&#233;sar Gonz&#225;lez

Reputation: 21

I think it´s a problem with the FADE. I change this:

<div class="modal fade" id=... >

to 

<div class="modal" id=... >

(Removing the fade)

This is not the most desired solution but it works.

Upvotes: 2

Scott Selby
Scott Selby

Reputation: 9570

there were major changes to bootstrap from version 2.1.* to 3.0 , there are many classes that no longer exist - these should be updated to the newer versions

see the list of important changes here - Migrating to Bootstrap 3.0 , go through and delete all depricated classes and replace them with their equivalent classes.

Upvotes: 1

Related Questions