单击图像时隐藏 div 并打开另一个 div

Question

I have an image gallery and inside each image I have a div with the image name. When I click on an image a modal with some details is opened and the div with the image name is changed by the div with the tools.

What I want is that when closing the modal (just click outside it) everything returns to the original phase ie the div with the name replaces the div with the tools.

Javascript

$(document).ready(function() {
  var toolbar = $('.ImageButtonsG').html();
  $(".d-block").each(function (index, value) {
    $(this).on("click", function(){
      var default_title = $(this).find('.ImageText');
      $(default_title).html(toolbar);
      $('.ImageButtonsG').empty();
    });
  });
});

Answer 1

I found problem with your JS code. Here is the updated code:

$(document).ready(function() {
  var toolbar = $('.ImageButtonsG').html();
  $(".d-block").on("click", function(){
      var default_title_ele = $(this).find('.ImageText');
      var default_title = $(default_title_ele).html();
      $(default_title_ele).html(toolbar);
      $("#myModal2").on('hidden.bs.modal', function () {
          $(default_title_ele).html(default_title);
      });
    });
});

Here is updated codepen . I hope it will solve your problem.