2

Necesito 'desactivar' un elemento <a>, después de haber dado clic sobre el. Estoy utilizando Bootstrap, al momento de dar clic sobre un elemento <a>, se abre un modal y al cerrarlo, el elemento <a> sigue como si estuviera 'seleccionado'. ¿Cómo lo puedo quitar?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#myModal">Esto es un ejemplo</a>
<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">Example</h4>
      </div>
      <div class="modal-body">
        <p>Example</p>
      </div>
    </div>
  </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

1
  • podrías sustituir la etiqueta a por una etiqueta label
    – cignius
    Commented el 18 sept. 2017 a las 21:32

2 respuestas 2

0

Por temas de accesibilidad, después de que se cierra un modal, el focus debe regresar al elemento que lo lanzó. Por lo tanto no puedes quitarle el focus a tu link después de utilizarlo. Referencias: Respuesta en SO, Issue en GitHub

Sin embargo, si no deseas que visualmente se muestre como seleccionado, puedes agregar reglas de css para a:focus y a:hover:

    a:focus {
      color: #337ab7 !important;
      outline: none !important;
      text-decoration: none !important;
    }

    a:hover {
      color: #23527c !important;
      text-decoration: underline !important;
    }

Tu código completo quedaría así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      a:focus {
        color: #337ab7 !important;
        outline: none !important;
        text-decoration: none !important;
      }
      a:hover {
        text-decoration: underline !important;
        color: #23527c !important;
      }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#myModal">Esto es un ejemplo</a>
    <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">Example</h4>
          </div>
          <div class="modal-body">
            <p>Example</p>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

0

Para quitar realmente el foco de a deberías utilizar blur() sobre a cuando cierres el modal, así de primeras te debería quedar algo como lo siguiente:

$('#myModal').on('hidden.bs.modal', function () {
    $('a').blur();
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.