隐藏模式不在按钮单击时呈现

Question

这是我的 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>

按钮 data-target 匹配模式 id 但是当我点击按钮时，没有任何反应。

如有任何疑难解答建议，我们将不胜感激。我从来没有实现过模态，所以这可能是一个非常基本的疏忽。我什至尝试在模式中将 aria-hidden 更改为 false 以查看它是否会出现在初始页面渲染中，但它没有。

更新

感谢 @Guruprasad Rao（下面的回答），我现在有一个可以工作的 Fiddle，但仍然不能工作的代码：

视图在 HAML 中 - 在 HTML 中呈现。单击按钮时，没有任何反应。
我查看源代码，将一个按钮和一个模式的 HTML 复制到 Fiddle。
Fiddle 与在我的网站上不起作用的相同代码完美配合。

Answer 1

它应该是 data-target='#signup-52' 并从 modal 中删除 hide class 并仅保留 modal fade

FIDDLE DEMO

Answer 2

我在 application.js 中失踪了 //= require bootstrap。仍然不确定为什么我的所有其他 Bootstrap 样式在没有它的情况下也能正常工作，但模态框需要它。一旦我这样做了，我就遇到了 "modal is in the background" 问题，但是用这个很好的答案 Bootstrap modal appearing under background.

解决了这个问题

隐藏模式不在按钮单击时呈现

Hidden modal not rendering on button click

modal-dialog

twitter-bootstrap

ruby-on-rails-4