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

应该{{1}}并从data-target='#signup-52'移除hide课程并仅保留modal

<强> FIDDLE DEMO

Answer 2

我在//= require bootstrap中遗失了application.js。仍然不确定为什么我的所有其他Bootstrap样式在没有它的情况下工作但是模态需要它。一旦我这样做了，我就有了“模态在后台”的问题，但是用这个很棒的答案解决了这个问题Bootstrap modal appearing under background。

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

2 个答案: