How to hide url

Asked

Viewed 477 times

1

I have a pop-up that the close button works as a link, but it appears in the URL and is an "ugly" effect. What would be the best way to get off follows code:

<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>`
html css input

  • Why the modal closing anchor has href="#openModal"?

  • @Andersoncarloswoss I think it is pq this Modal was to be opened when clicking on a Link, but as it was to start appearing on the screen already, the reverse logic was made. It already starts with display:block, and in :target makes the display:None

  • That, was a modal where clicked to open there was made the reverse logic.

1 answer

2


One option is to use jQuery and not return the event on click. Notice I put one fadeOut() for Modal to disappear with a transition, but if you want it to disappear from the screen at once you can change fadeOut() for hide()

inserir a descrição da imagem aqui

OBS: As you will now use jQeury to remove this modal you will not need to use some CSS classes especially the ones you have :target etc. You might consider removing them, because now they don’t make much sense...

<!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>

  • Did not work, continued showing in the url

  • @JVEUZEBIO edited the answer and put the whole HTML code, as you can see there in GIF the script is working perfectly... maybe you forgot to adjust something there. So I put the complete code now, test there. If it is working on the snippet here of the Site has to work ai tb...

Browser other questions tagged html css input

You are not signed in. Login or sign up in order to post.