How to hide url

Question

How to hide url

Asked 5 years, 6 months ago

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

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

– Woss

2019/03/15 at 11:45
@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

– hugocsl

2019/03/15 at 11:47
That, was a modal where clicked to open there was made the reverse logic.

– JVEUZEBIO

2019/03/15 at 11:48

1 answer

Browser other questions tagged html css input

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

by hugocsl • **65,517** points · Answer 1 · 2019-03-15T11:59:36+00:00

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()

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>