Question

我正在使用Bootstrap Modal来显示消息。我有一个触发模态的链接：

<a class="row-btn" id="where-we-are" href="#" onclick="$('.www').modal('show');"><span class="glyphicon glyphicon-map-marker"></span><br>Where We Are</a>

页面从背景变暗，但模态不显示。

<div class="modal fade www">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Sorry, that's classified.</h4>
      </div>
      <div class="modal-body">
        <p>Our location is top secret. We have many enemies who track us day and night to discover our secrets. Who knows, you might be one of them!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

问题是因为我从链接触发模态吗？为什么背景出现了，而不是模态本身？

Answer 1

我发布了你的工作代码

在 Bootstrap 中，我们可以选择提供目标div.classname为data-target="provide class Name"和data-toggle="modal"以提及其模态

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<a class="row-btn" id="where-we-are" href="#" data-toggle="modal" data-target=".www" ><span class="glyphicon glyphicon-map-marker"></span><br>Where We Are</a>

<div class="modal fade www">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Sorry, that's classified.</h4>
      </div>
      <div class="modal-body">
        <p>Our location is top secret. We have many enemies who track us day and night to discover our secrets. Who knows, you might be one of them!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

＆＃13;

Bootstrap Modal没有打开，但背景出现了

1 个答案: