Home / Questions / 103204
Accepted
Hoose
Asked: 2020-09-19 13:16:16 +0800 CST 2020-09-19 13:16:16 +0800 CST

'Disable' an element in HTML

  • 772

I need to 'deactivate' an element <a>, after having clicked on it. I am using Bootstrap, when I click on an element <a>, a modal opens and when I close it, the element <a>continues 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>

jquery

2 Answers

  1. Best Answer

    For accessibility reasons, after a modal closes, it focusshould return to the element that launched it. Therefore you can't remove the focusfrom your link after using it. References: Answer on SO , Issue on GitHub

    However, if you don't want it to visually show as selected, you can add css rules for a:focusand 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>

    • 0

  2. To actually remove the focus from ayou should use blur() on ait when you close the modal, so first off you should have something like the following:

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