Question

我希望当我将光标移动到图像上时，它应显示3个按钮，然后当我点击它们中的任何一个时，应该打开一个模态。我实际上已经完成了这个，但问题是当我点击任何出现的按钮时，会反映出一个模态，一旦我尝试关闭该模态，这三个选项就显示在该图像上而不是出现。请任何人帮忙。

以下是代码：

<div class="row text-center">
  <div class="col-sm-4">
    <div class="thumbnail">
      <div class="caption">
        <button class="btn" data-toggle="modal" data-target="#myModal1a" style="color:#000">Add</button>
        <button class="btn" data-toggle="modal" data-target="#myModal1b" style="color:#000">Delete</button>
        <button class="btn" data-toggle="modal" data-target="#myModal1c" style="color:#000">Modify</button>
      </div>
      <img src="Department.png" style="position:fixed" alt="ALT NAME" width="250" height="60">
    </div>
    <h3 class="text" id="D1"><b>Department Options </b></h3> 
  </div>
</div>

<!-- Modal 1a -->
<div class="modal fade" id="myModal1a" 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><span class="glyphicon glyphicon-lock"></span> Create Department</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="psw">Department Name</label>
            <input type="text" class="form-control" id="psw" placeholder="Provide a name">
          </div>
          <div class="form-group">
            <label for="usrname">Department ID</label>
            <input type="text" class="form-control" id="usrname" placeholder="Provide an ID">
          </div>
          <button type="submit" class="btn btn-block">Submit
            <span class="glyphicon glyphicon-ok"></span>
          </button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
          <span class="glyphicon glyphicon-remove"></span> Cancel
        </button>
        <p>Need <a href="#">help?</a></p>
      </div>
    </div>
  </div>
</div>

Answer 1

如果您只是想在模态关闭时隐藏这些按钮，那么如果您使用jQuery，那就是它的结果。您只需要以下列方式使用Bootstrap模式的 hidden.bs.modal 事件：

$('#myModal1a').on('hidden.bs.modal', function () {

    $('.imgButton').each(function () {

        $(this).hide();

    })

})

假设您为所有按钮提供了一个名为'imgButton'的课程：）

将鼠标悬停在图像上时出现的按钮

1 个答案: