0

Here is my HTML:

  <div class='row sheet-row'>
    <div class='col-sm-3'>Fruits</div>
    <div class='col-sm-3'>
      <button class='btn btn-primary' data-target='signup-52' data-toggle='modal'>Sign up</button>
    </div>
    <div class='col-sm-3'></div>
  </div>
  <div aria-hidden='true' aria-labelledby='Sign up' class='modal hide fade' id='signup-52' role='dialog' tabindex='-1'>
    <div class='modal-header'>
      <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>×</button>
      <h3 id='myModalLabel'>Sign up</h3>
    </div>
    <div class='modal-body'>
      <p>One fine body…</p>
    </div>
    <div class='modal-footer'>
      <button aria-hidden='true' class='btn' data-dismiss='modal'>Close</button>
      <button class='btn btn-primary'>Save changes</button>
    </div>
  </div>

The button data-target matches the modal id yet when I click the button, nothing happens.

Any suggestions for troubleshooting would be appreciated. I have never implemented a modal, so it is likely a pretty basic oversight. I even tried changing aria-hidden to false in the modal to see if it would appear on initial page render, but it did not.

UPDATE

Thanks to @Guruprasad Rao (answer below), I now have a working Fiddle, but still not working code:

  1. View is in HAML - renders in HTML. On button click, nothing happens.
  2. I View Source, copy HTML for one button and one modal into Fiddle.
  3. Fiddle works perfectly with the same code which is not working on my site.
steve klein
  • 2,566
  • 1
  • 14
  • 27

2 Answers2

1

It should be data-target='#signup-52' and remove hide class from modal and keep only modal fade

FIDDLE DEMO

Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
  • Thanks. I made these changes but no love. I click and nothing happens. I even loaded my new HTML in your fiddle and it works fine there, just not on my page. Is there some Rails or other environment setting which could be blocking? – steve klein Apr 23 '15 at 14:31
  • I should mention I have multiple buttons on my page (with a modal for each). Each has a unique `data-target`/`id` so it should work (in theory). – steve klein Apr 23 '15 at 14:45
  • OK since I am not using jQuery for this, I configure the Fiddle for pure JS. I also selected "No wrap - in body" since my `modal` code follows my `button` code. The Fiddle still works fine but my code doesn't. Any other ideas? – steve klein Apr 23 '15 at 17:58
  • @Rao I did and there aren't any. I just updated my `bootstrap-rails` gem to version 3.3.3 and it is still not working. Anything else needed for modals to work? – steve klein Apr 24 '15 at 11:50
  • No nothing. That should actually do.. But as a 1 last suggestion I can tell is just just copy and paste a demo code of bootstrap modal in your project as a dummy model and try to open it.. – Guruprasad J Rao Apr 25 '15 at 09:10
1

I was missing //= require bootstrap in application.js. Still not sure why all of my other Bootstrap styling worked without it but it was needed for modals. Once I did that, I had the "modal is in the background" problem but solved that with this great answer Bootstrap modal appearing under background.

Community
  • 1
  • 1
steve klein
  • 2,566
  • 1
  • 14
  • 27