'Deactivate' an element in HTML

Navigation
2

I need to 'deactivate' an element <a> , after having clicked on it. I am using Bootstrap, when clicking on an element <a> , a modal opens and when closing it, the element <a> follows as if it were 'selected'. How can I remove it? 

<!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>
    
asked by Hoose 18.09.2017 в 23:16
source

2 answers

0

By accessibility issues, after a modal is closed, the focus must return to the element that launched it. Therefore, you can not remove the focus from your link after using it. References: Answer in SO , Issue on GitHub

However, if you do not want to be visually shown as selected, you can add css rules for a:focus and a:hover : 

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

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

Your complete code would look like this: 

<!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>
    
answered by 19.09.2017 / 07:46
source
0

To really remove the focus from a you should use blur () about a when you close the modal, as well first you should have something like the following: 

$('#myModal').on('hidden.bs.modal', function () {
    $('a').blur();
});
    
answered by 19.09.2017 в 08:43
Overlaid images responsive Possibilities? autocomplete email