Question 259545 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Modal window in joomla 3

Maybe the solution to my question is already on the site, but, unfortunately, I didn’t find it… Therefore, I apologize if I repeated the question.
help me solve a problem with focus on a button.

<a href="#myModal" id="openModalButton" class="btn btn-primary" tabindex="-1" data-toggle="modal">Дізнатись ціну</a>

this button was created in joomla 3

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Отримати консультацію</h5>
            </div>
            <div class="modal-body">
                <!-- Здесь может быть ваш контент для модального окна -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

This is a modal window that a button opens,
when the window is closed the focus remains on the button, which is not good. I tried to remove it using JS but unfortunately nothing helped, please help.

<div id="elementToFocus">

</div>

<script>

    $('#myModal').on('hidden.bs.modal', function () {

        $('#elementToFocus').focus();

        $('#openModalButton').blur();
    });
</script>

This is the last thing I tried
nothing worked

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I tried both of your methods, unfortunately they didn’t help, after closing the window the focus still returns to the button


  2. 0

    one potential way is to add data-dismiss="modal" attribute to the button that opens the modal like this

    <a href="#myModal" id="openModalButton" class="btn btn-primary" data-toggle="modal" data-dismiss="modal" tabindex="-1">
    Дізнатись ціну
</a>

    another way is to add blur function to the button itself, to remove focus after modal is closed

    <script>
  $( "#openModalButton" ).on( "click", function() {
    $(this).blur();
  });
</script>

    let me know which one worked for you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search