Question

我正在尝试使用3个按钮在Bootstrap中创建一个Button Group。最后一个“删除”按钮也附加了一个模态。我的代码看起来像是为了让Modal起作用。

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <a href="#" data-target="#deleteModal" class="btn btn-danger" role="button" data-toggle="modal" data-placement="top" title="Delete">D</a>
</div>

上面的代码工作和按钮很好地分组。 Modal适用于“删除”按钮。但是，当我在下面的代码中使用工具提示和模态来处理“删除”按钮时，该按钮不再是该组的一部分，而是自己成为一个按钮。

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <span data-toggle="modal" data-target="#deleteModal">
    <a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">D</a>
  </span>
</div>

Answer 1

请参阅下面的代码，您可以找到答案。

＆＃13;

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Things You Trird<br><br>

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <span data-toggle="modal" data-target="#deleteModal">
    <a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">D</a>
  </span>
</div>
<br><br>

<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <a href="#" data-target="#deleteModal" class="btn btn-danger" role="button" data-toggle="modal" data-placement="top" title="Delete">D</a>
</div>


<hr>

Things I tried....
<br><br>
<div class="btn-group btn-group-sm">
  <a href="#" class="btn btn-primary" role="button" data-toggle="tooltip" data-placement="top" title="View">V</a>
  <a href="#" class="btn btn-success" role="button" data-toggle="tooltip" data-placement="top" title="Edit">E</a>
  <a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">
    <span data-toggle="modal" data-target="#deleteModal">D</span>
  </a>
  
</div>



<div id="deleteModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

＆＃13;

带模态和工具提示的Bootstrap按钮组

1 个答案: