模态对话框不显示[关闭]答案

【问题标题】：Modal dialog doesn't show [closed]模态对话框不显示[关闭]
【发布时间】：2016-02-25 18:33:50
【问题描述】：

我在 javascript 的帮助下制作了一个模式。模态怎么出不来？这些是我的代码：

 <button class="jobview-control btn-primary jobview-btn"  id="btn-show-modal">Recommend</button>

    <div class="modal hide" id="dialog-box">
      <div class="modal-header">
          <h2>Header</h2>
      </div>
      <div class="modal-body">
          <p>body body body</p>
      </div>
      <div class="modal-footer">
          <p>this is the Footer.</p>
      </div>
    </div>

  <script type="text/javascript">
     $(function(){
         $("#btn-show-modal").click(function(e){
             e.preventDefault();
             $("#dialog-box").modal('show');
         });
     });
  </script>

【问题讨论】：

这可能是任何事情的结果。您是否正确引用了您的 javascript 文件？使用您的浏览器开发者工具发现任何错误并在此处发布

标签： javascript html css twitter-bootstrap bootstrap-modal

【解决方案1】：

只需将以下两个属性 data-target="#dialog-box" 和 data-toggle="modal" 添加到您的按钮即可：

<button data-target="#dialog-box" data-toggle="modal" class="jobview-control btn-primary jobview-btn" id="btn-show-modal" >Recommend</button>

希望这会有所帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<button data-target="#dialog-box" class="jobview-control btn-primary jobview-btn" id="btn-show-modal" data-toggle="modal">Recommend</button>


<div class="modal fade" id="dialog-box">
  <div class="modal-header">
    <h2>Header</h2>
  </div>
  <div class="modal-body">
    <p>body body body</p>
  </div>
  <div class="modal-footer">
    <p>this is the Footer.</p>
  </div>
</div>

【讨论】：

嗨，我试过你的代码，但背景只会变暗，...但对话框没有出来:(这是怎么回事？
嘿....我将“modal hide”类更改为“modal fade”，它起作用了！哈哈哈哈非常感谢！！

【解决方案2】：

我假设我们正在讨论 Bootstrap 模式。如果是这样，试试这个：

<button type="button" class="jobview-control btn-primary jobview-btn" data-toggle="modal" data-target="#dialog-box">Recommend</button>

<div class="modal fade" id="dialog-box" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
          <h2>Header</h2>
      </div>
      <div class="modal-body">
          <p>body body body</p>
      </div>
      <div class="modal-footer">
          <p>this is the Footer.</p>
      </div>
    </div>
</div>

不需要 jQuery，因为您在按钮 (data-target) 中指定点击时打开的内容。

【讨论】：

我试过了，先生...但还是不行:(
查看我的更新答案。