Кнопки, приходящие во время наведения на изображение

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. Вам просто нужно использовать hidden.bs.modal события бутстраповских модальностей следующим образом:

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

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

     $(this).hide(); 

    }) 

}) 

Предполагая, что вы обеспечиваете класс под названием «imgButton» ко всем кнопкам :)