Bootstrap Modal Popup Not Clickable

Add the below code in the same page.

#myModal{
 z-index: 9999
}

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">

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