4

Estou enfrentando o problema de exibir imagem dentro do modal bootstrap.

Uso esse plugin : Magnific-Popup

Segue o código:

HTML:

<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <a class="test-popup-link" href="http://i.imgur.com/YZ7AGyF.jpg">Open popup</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS:

$(document).ready(function() {
  $('.test-popup-link').magnificPopup({
    type: 'image'
  });
});

Resultado final:

inserir a descrição da imagem aqui

Aqui está jsfiddle: http://jsfiddle.net/1aeur58f/106/

OBS: A imagem não deve ficar atrás do modal, sempre a frente do modal.

Alguma solução brilhante ?

1 Resposta 1

3

Tem que criar um body div.mfp-wrap { z-index: 999999 !important; } para que o elemento fique sobre o modal.

$(document).ready(function() {
  $('.test-popup-link')
    .magnificPopup({
      type: 'image'
    });
});
body div.mfp-wrap { z-index: 999999 !important; }
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>


<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <a class="test-popup-link" href="http://i.imgur.com/YZ7AGyF.jpg">Open popup</a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

5
  • Virgilio Novic, dá um help, ao abrir uma imagem pequena, o modal não fica preto. Veja esse exemplo : jsfiddle.net/1aeur58f/109 Commented 21/02/2017 às 1:51
  • 1
    @MatheusMiranda eu adicionei mais três css, mas, o que ele vai fazer centralizar o modal para que a imagem fica totalmente sobre ele, claro a imagem tem que ser maior que o modal rssrs
    – novic
    Commented 21/02/2017 às 1:59
  • 1
    @MatheusMiranda não adianta só esse css que postou tem que centralizar pra que ele fico atras mesmo acabei de testar
    – novic
    Commented 21/02/2017 às 2:21
  • Virgilio Novic olha essa: jsfiddle.net/1aeur58f/113 Commented 21/02/2017 às 3:05
  • 1
    Eu vi @MatheusMiranda.
    – novic
    Commented 21/02/2017 às 3:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .