andreregino
2/5/2018 - 3:07 AM

Modal

Criando uma modal que exibir√° uma imagem qualquer no centro

HTML

<div class="modal-size-chart">
  <img src="caminho-do-icone-de-fechar-a-modal.jpg" class="close-modal">
  <div class="size-chart-content">
    <img src="caminho-da-imagem-a-ser-exibida-na-modal.jpg">
  </div>
</div>

SASS

.modal-size-chart {
    display: none
    width: 600px
    overflow: hidden
    background: #FFFFFF
    box-shadow: 20px 20px 20px 0 rgba(0,0,0,0.20)
    border: 1px solid #7F7F7F
    clear: both
    z-index: 9999
    position: fixed
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    .size-chart-content {
        padding: 35px
  }
  
    .close-modal {
        position: absolute
        top: 15px
        right: 15px
        width: 20px
        height: auto
        }
    }

jQuery

<script type="text/javascript">
    jQuery(".elemento-responsavel-por-abrir-a-modal").on("click", function () {
        jQuery(".modal-size-chart").show();
    });
    jQuery(".close-modal").on("click", function () {
        jQuery(".modal-size-chart").hide();
    })
</script>