Prevent button interaction until completion of modal animation using Bootstrap 4

Question

Prevent button interaction until completion of modal animation using Bootstrap 4

I have incorporated a Bootstrap 4 modal in my website to display a large navigation menu. The navigation is triggered by a toggle button with a CSS animation that transforms a hamburger icon into an X.

However, I encountered an issue where if the button is clicked too quickly before the modal animation completes, it displays the X icon even when the menu/modal is closed.

Is there a way to prevent the button from being clickable until the modal animation finishes?

This is the code I am currently using:

$('.menu').click(function(){
   $('#burger').toggleClass('active');
});

I came across a method to detect when the modal animation is complete:

$('#myModal').on('shown', function () {
  // do something… 
})

Unfortunately, I'm having trouble integrating this into my existing function.

You can view my current code here: https://codepen.io/cray_code/pen/JjjqRpN

javascript jquery html css bootstrap-4

Answer 1

Answer №1

To toggle the burger and show/hide the modal, simply connect both events together.

var manageBurger = function () {
  $('#burger').toggleClass('active-sandwich');
}

$('#nav-modal').on('show.bs.modal', manageBurger)
$('#nav-modal').on('hide.bs.modal', manageBurger)

Example

Answer 2

To toggle the burger and show/hide the modal, simply connect both events together.

var manageBurger = function () {
  $('#burger').toggleClass('active-sandwich');
}

$('#nav-modal').on('show.bs.modal', manageBurger)
$('#nav-modal').on('hide.bs.modal', manageBurger)

Example

Answer 3

Answer №2

Here's an alternative way to write the code:

$(document).ready(function(){
    var isDisplayed = false;
    $('#nav-modal').on('shown.bs.modal', function(){
        isDisplayed = false;
        $("#burger").css("display", "block");
    });

    if(!isDisplayed)
    {
        $('#burger').on('click', function(){
            isDisplayed = true;
            $("#burger").css("display", "none");
        });
    }

    $('#nav-modal').on('hidden.bs.modal', function () {
       isDisplayed = false;
       $("#burger").css("display", "block");
    });

Apologies for any confusion in the code, but I hope this explanation clarifies things. Essentially, the boolean variable is used to control the visibility of an element and prevent interaction until a certain condition is met.

Answer 4

Here's an alternative way to write the code:

$(document).ready(function(){
    var isDisplayed = false;
    $('#nav-modal').on('shown.bs.modal', function(){
        isDisplayed = false;
        $("#burger").css("display", "block");
    });

    if(!isDisplayed)
    {
        $('#burger').on('click', function(){
            isDisplayed = true;
            $("#burger").css("display", "none");
        });
    }

    $('#nav-modal').on('hidden.bs.modal', function () {
       isDisplayed = false;
       $("#burger").css("display", "block");
    });

Apologies for any confusion in the code, but I hope this explanation clarifies things. Essentially, the boolean variable is used to control the visibility of an element and prevent interaction until a certain condition is met.

Prevent button interaction until completion of modal animation using Bootstrap 4

Answer №1

Answer №2

Similar questions

The OK Button Dialogbox is currently malfunctioning

"Stuck in a Standstill: Express/React Commit

Having trouble with missing jQuery form serialize data in CodeIgniter when using TinyMCE?

jQuery alert: A TypeError was caught stating that the object being referred to does not have the 'dialog' method available

What is the best way to convert the information from a <SelectInput /> component or similar components into another language?

Securely affix two elements on a webpage using HTML, CSS, and Bootstrap

Issue with image magnification on Internet Explorer 9 using the Cloud Zoom plugin extension for Joomla

Tips for displaying multiple results from a MySQL query in a single .ejs file using Node.js and Express

Why is the output [[]] instead of [] after removing the last array like [["1"]] using .splice()?

Generating URL parameters for Ajax requests on the fly

What differences occur in JavaScript when the IE Developers Tools are accessed?

Utilize the 'content' attribute to acquire the value of the node

ShadCn UI ResizablePanelGroup effortlessly grows within the available area without the need to set a specific height

Tips for selecting a specific input field in a ReactJS component with multiple inputs

Transform or retrieve information from input into unformatted text

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Issue with importing CSS file in Vaadin Java

Is the contenteditable feature working properly when updating PHP, SQL, and AJAX in the network?

Combining the container and container-fluid classes with Bootstrap for versatile layout design

Trouble arises when trying to deploy React application on Github pages