CODEWITHSUNDEEP
javascripttwitter-bootstraptwitter-bootstrap-3
Onichan
Onichan

Reputation: 4516

Bootstrap Modal Popup Not Clickable

Using Bootstrap to add a modal popup. Upon clicking the trigger button, the modal is dark and unclickable. Any idea what's causing this or where to look?

enter image description here

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require miracle/jquery.noconflict
//= require miracle/modernizr.2.8.3.min
//= require miracle/jquery-migrate-1.2.1.min
//= require miracle/jquery-ui.1.11.2.min
//= require bootstrap
//= require turbolinks
//= require magnific-popup/jquery.magnific-popup.min
//= require miracle/jquery.stellar.min
//= require miracle/waypoints.min
//= require owl-carousel/owl.carousel.min
//= require jquery.sky.carousel/jquery.sky.carousel-1.0.2
//= require miracle/jquery.plugins
//= require miracle/main
//= require_tree .

Upvotes: 17

Views: 20223

Answers (7)

Hendrik Debedts
Hendrik Debedts

Reputation: 1

Situation:

  • I work with Razor pages
  • The modal (div) was rendered as the last element of the body (of the partial view)
  • In _layout.cshtml all the default scripts were rendered after the @RenderBody call. So in the rendered html all the script tags were rendered on the end of the body of the partial view not on the end of the entire body
  • In the rendered html the modal (div) was rendered after the scripts, that causes the problem.

<script type="text/javascript">
        $(document).ready(function () {
            VerhuisNaarEindeVanBody($(".modal")[0], "~/js/Producten.js");
        });
    </script>

How I solved the problem (I work with ViewComponents, I don't use partialViews anymore for that):

  • I put the 'Modal' div into my ViewComponent
  • I wrote js (in the ViewComponent) to move the 'Modal' div to the end of the body (after the dom is loaded

Hope this helps anybody to solve the problem

Upvotes: 0

Edward Motloung
Edward Motloung

Reputation: 51

.modal-dialog has pointer-events set to none.

I overwrote that property and set pointer-events: unset;

so:

.modal-dialog {
  pointer-events: unset !important;
}

This did the trick for me

Upvotes: 2

Y. Joy Ch. Singha
Y. Joy Ch. Singha

Reputation: 3252

After long time, i got this simple error just by

.modal-backdrop {
    z-index: -1;
}

Thanks.

Upvotes: 1

Emir
Emir

Reputation: 390

I had the same problem when I call a modal from another modal (but not when I call only the first one).

So, this might not help you but it can save someone else a lot of time: I had a different definition of fade effects and there was the line with display: inline-block. I removed it and the problem's gone.

The failing CSS definition:

.fade {
    ...
    display: inline-block;
    ...
}

Upvotes: 0

sara elsayed
sara elsayed

Reputation: 459

i solved the same problem when i add data-backdrop="false" in my modal like this:

<div class="modal fade" id="userGoing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">

Upvotes: 45

Chakreshwar Sharma
Chakreshwar Sharma

Reputation: 2610

Add the below code in the same page.

#myModal{
 z-index: 9999
}

Upvotes: 4

Sifnos
Sifnos

Reputation: 1171

Sometimes, changing the z-index can mess up things with Bootstrap so as they say in Bootstrap documentation, try to place your <!-- Modal --> block on top of your page. If it's a modal that is accessible from many places in your app you can place it in a partial and call it on top of your app/views/layouts/application.html.erb like so (sorry, it's a slim template, tell me if you need erb translation):

doctype html
html
  head
    == render 'layouts/meta'

    = stylesheet_link_tag …
    = javascript_include_tag …
    = csrf_meta_tags

  body

    == render 'path/to/your/modal'

    .container
      == yield

    == render 'layouts/footer'

Otherwise, you could try to do a special <%== yield :modal %> in your application.html.erb and call it from somewhere else with `<%- content_for :modal %>. Not sure about the erb syntax here. It's explained here : Using The Content For Method

Upvotes: 7

Related Questions