The functionality of scrolling ceases to work once the bootstrap modal is closed

I am utilizing Bootstrap v3.1.1 to showcase a modal popup on one of my web pages. The following code shows how I have implemented it.

<!--Start show add student popup here -->
<div class="modal fade" id="add-student" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div id="divStudentPopUp"></div>
    </div>
</div>
<!--End show add student popup here -->

<!-- JS Code Goes Here -->
//--- Add Student POP Up Script-- Start
$('#add-student').modal('toggle');
$('#add-student').modal('show');
$('#add-student').modal('hide');
//--- Add Student POP Up Script-- End
<!-- END -->

The text content is dynamically added through an AJAX call when the modal popup is displayed. There are two buttons on it - SAVE and CANCEL.

<!-- HTML for Cancel button -->
<button class="hvr-ripple-out btn btn-red cancel" data-dismiss="modal" id="btnCancelStudent">Cancel</button>

The issue arises when clicking the CANCEL button as the modal closes but the main window (body) scroll does not work.

Thank you in advance!

javascriptjquerycssajaxtwitter-bootstrap

Answer №1

Make sure to verify if your body contains the class 'model-open'. This class applies properties with overflow-y:hidden, so simply remove it when the modal is closed.

$('#add-employee').on('hidden.bs.modal', function () {
    $('body').removeClass('modal-open');
});

Answer №2

Dealing with this issue is fairly typical; consider incorporating a callback function.

$('add-student').toggleClass('modal-open');

Answer №3

Take a look at this fiddle link where I've added some content to demonstrate page scrolling:
http://jsfiddle.net/SarahDoe/1a2b3c4D/

   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal>
      Close
    </button>
    <button type="button" class="btn btn-primary">
      Save changes
    </button>
  </div>

If you encounter any issues, feel free to upload your code to a fiddle and share the link with me for further assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Vue: Incorporating and extracting JSON data with JavaScript

I need to import the following JSON from a different component because it includes require and Math. I am having trouble saving it in JSON file format. let test = [ { name:"A", imgSrc: require('@/assets/img/A.png'), ...

javascriptvue.js

Control the playback of multiple HTML5 videos with the ability to pause and resume, while also adding a

Trying to achieve the functionality of playing and pausing multiple videos. When one video is played, the others should automatically pause. The videos should appear blurred, except when actively playing. Does this make sense? http://jsfiddle.net/1frjov8e ...

jqueryhtmlvideo

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

javascriptcss

Interactive cascading dropdown selection with ajax and jquery

I'm currently working on setting up a search feature with Dynamic dependent dropdown selection. The first dropdown menu fetches all the regions from the database, and the second one displays the cities corresponding to the selected region. However, I ...

jqueryajaxlaravel

Incorporate the feedback received from the user in the previous trial as a prompt for the next

I am currently working on developing an experiment using the JSPsych JavaScript package. The main goal of my experiment is for participants to input a letter in a survey-text trial, and then have that same letter presented back to them as a stimulus in the ...

javascriptjspsych

Trouble with Background Image Display in Internet Explorer 8

I have been attempting to set a background image for the . element, but it is not displaying correctly. The image shows up in Firefox and Chrome, but not in Internet Explorer. I have included a link to my website and relevant CSS code below. Can anyone pro ...

javascriptjqueryhtmlcss

Using the onclick attribute as a unique identifier for a button

I am currently facing a challenge with a form that does not have an ID Here is the code snippet in question: <button class="btn btn-primary" onclick="showModal()" type="button">Browse Data</button> Unfortunately, I don't have any contro ...

javascriptjqueryhtml

Take the information entered in an HTML form, add it to a JSON object, and save it in a MYSQL

I'm currently working on extracting data from a user registration form in HTML, converting it to JSON format, and then storing it in MySQL. Your assistance with this process would be greatly appreciated. HTML <form id="myForm" action="userInf ...

phphtmlmysqlajaxjson

When the browser's inner width is less than the inner height, use jQuery or JavaScript to show a message on the webpage

I've been having trouble getting this to work and I've attempted various solutions suggested by different sources such as: Display live width and height values on changing window resize php echo statement if screen is a certain size And more, b ...

javascriptphpjqueryhtmlajax

How to incorporate diagonal lines in CSS within its parent container?

Is there a way to create a diagonal line that fills in and fits perfectly into a box using just CSS, without the need for any background images? div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto; ...

htmlcsscss-transformsdiagonal

Issue with Webpack: error message "Cannot read property 'readFile' of undefined" is causing no output files to be generated

When utilizing version webpack > 5, the configuration for my appDevMiddleware.js is as follows: const path = require('path'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware' ...

javascriptnode.jsreactjswebpack

Increase the parent height by 100% when the child element expands

I am attempting to create a full-screen website with 100% height and no scrollbar. I have a div that takes up 90% of the page height and I want to dynamically add elements inside it. However, when there are too many elements inside this div, they expand th ...

htmlcss

Creating dynamic divs on button click for my project is something that I must do, and I will

When the user clicks on the Add button, a new div should be added as shown in the image above. Implementing this functionality using Bootstrap is crucial because the divs must rearrange correctly based on different resolutions such as 1920x900, 1280x600, ...

javascriptjquery

Managing ajax requests timeouts while abiding by the browser's connection limitations

Encountering an issue with ajax requests and fixed timeouts, I've resorted to using this straightforward code snippet: $.ajax({ url: "test.html", error: function(){ //do something }, success: function(){ //do something ...

javascriptjqueryajax

Encountering a Zone.js error when trying to load an Angular 7 app using ng serve, preventing the application from loading

Scenario: Yesterday, I decided to upgrade my Angular app from version 5.2.9 to 6 and thought it would be a good idea to go all the way to 7 while I was at it. It ended up taking the whole day and required numerous changes to multiple files, mostly due to R ...

javascriptangularangular7zonejs

The Facebook JS SDK is causing an XSS error and returning a "user_denied" response, even though the Auth Popup for FB.Login is not being

I currently have a Facebook canvas app located at Previously, I was using an anchor link to direct users to the OAUTH login flow. After implementing the Facebook JavaScript SDK, I followed this logic: 1) Initialization of the FB API FB.init({ a ...

phpjavascriptjqueryfacebook

Cannot get v-if to work with multiple conditions

<template> <div> <h2>{{weatherData.city}}</h2> <h3>{{weatherData.weather}}</h3> <rain-cloud v-if="iconSelect==='09d'"/> <sun-cloud v-if="iconSelect==='04d'"/> <sunsh ...

javascriptvue.js

Managing messaging broadcasts for messenger bots by creating and retrieving unique identifiers

As a beginner using a starter project from glitch, I have a project set up at this link: I need help understanding how to obtain the message_broadcast_id and how to create it. This is how I usually create a normal message: function callSendAPI(messageDa ...

javascriptfacebook-messenger-bot

Ways to incorporate External JS and CSS files into Angular 5 (loading files with a delay)

I have encountered some challenges while attempting to import external JS and CSS files into my Angular 5 application. Below is the code snippet that I have tried so far: Component.ts : ngOnInit() { this.loadScript(); // also attempted with ...

javascriptcssangulartypescriptangular5

Issue with Web Worker functionality in SvelteKit on Firefox version 106.0.5

I've set up a function in my main file like this: const loadWorker = async () => { const SyncWorker = await import("$lib/canvas.worker?worker"); syncWorker = new SyncWorker.default(); syncWorker?.postMessage({}); ...

javascriptnode.jsfirefoxsveltesveltekit