1

Eu tenho um pop-up que o botão fechar funciona como link, porém aparece na URL e fica um efeito "feio". Qual seria a melhor forma de tirar segue código:

<div id="openModal" class="modalDialog">
    <div>
        <a href="#openModal" title="Close" class="closeModal"></a>
            <!-- Conteúdo do Modal -->
<img src="{{media url="wysiwyg/Paginas/Diaconsumidor/PopUp_2.png"}}" alt="Dia do Consumidor" />
            <!-- Conteúdo do Modal -->
    </div>
</div>

<style>
  .pedido {

      margin-top: -300px;
      margin-left: 40%;
      margin-right: 40%;
      margin-bottom: 100px;

  }

  .teste {

      padding-top: 100px;

  }

  .modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.73);
      z-index: 99999;
      display:block;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      /* pointer-events: none; */
  }

  .modalDialog:target {
      display:none;
      pointer-events: auto;
  }



  .modalDialog>div {
     width: 700px; 
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
    /*  background: #fff; */
  }

  .closeModal {
      background: #f34088;
      color: #FFFFFF;
      line-height: 35px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 34px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 15px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
  }

  .closeModal:after {
      content: "\d7";
  }

  .closeModal:hover {
      background: #f00;
  }
</style>`
3
  • Por que a âncora de fechar o modal possui href="#openModal"?
    – Woss
    15/03/2019 às 11:45
  • @AndersonCarlosWoss acho que é pq esse Modal era para ser aberto ao clicar em um Link, porém como era para já começar aparecendo na tela, foi feita a lógica inversa. Ele já começa com display:block, e no :target faz o display:none
    – hugocsl
    15/03/2019 às 11:47
  • Isso, era um modal onde clicava para abrir ai foi feito a logica inversa.
    – JVEUZEBIO
    15/03/2019 às 11:48

1 Resposta 1

2

Uma opção é usar o jQuery e não retornar o evento no click. Repare que eu coloquei um fadeOut() para o Modal sumir com uma transição, mas se vc quiser que ele suma da tela de uma vez vc pode trocar fadeOut() por hide()

inserir a descrição da imagem aqui

OBS: Como agora vc vai usar jQeury para remover esse modal vc não vai precisar usar algumas classes de CSS principalmente as que tem :target etc. Vc pode considerar remove-las, pois agora elas não fazem muito mais sentido...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .pedido {

            margin-top: -300px;
            margin-left: 40%;
            margin-right: 40%;
            margin-bottom: 100px;

        }

        .teste {

            padding-top: 100px;

        }

        .modalDialog {
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.73);
            z-index: 99999;
            display: block;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            /* pointer-events: none; */
        }

        .modalDialog:target {
            display: none;
            pointer-events: auto;
        }



        .modalDialog>div {
            width: 700px;
            position: relative;
            margin: 10% auto;
            padding: 5px 20px 13px 20px;
            border-radius: 10px;
            /*  background: #fff; */
        }

        .closeModal {
            background: #f34088;
            color: #FFFFFF;
            line-height: 35px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 34px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 15px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
        }

        .closeModal:after {
            content: "\d7";
        }

        .closeModal:hover {
            background: #f00;
        }
    </style>
</head>

<body>

    <div id="openModal" class="modalDialog">
        <div>
            <a href="#openModal" title="Close" class="closeModal"></a>
            <!-- Conteúdo do Modal -->
            <img src="{{media url="wysiwyg/Paginas/Diaconsumidor/PopUp_2.png"}}" alt="Dia do Consumidor" />
            <!-- Conteúdo do Modal -->
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $('a[href="#openModal"]').click(function () {
            $("#openModal").fadeOut();
            event.preventDefault()
        });
    </script>

</body>

</html>

2
  • Não funcionou, continuou mostrando na url
    – JVEUZEBIO
    15/03/2019 às 12:07
  • @JVEUZEBIO editei a resposta e coloquei o código inteiro do HTML, como vc pode ver ali no GIF o script está funcionando perfeitamente... talvez vc tenha esquecido de ajustar algo ai. Então coloquei o código completo agora, testa ai. Se está funcionando no snippet aqui do Site tem que funcionar ai tb...
    – hugocsl
    15/03/2019 às 12:17

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 .