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

What is the method for selecting the desired month on a primeng calendar with multiple selection enabled?

I am looking for a solution to make my inline primeNg Calendar display the month of a specific date in the model, and when I remove dates from the model, I want it to show the current month. I have tried using defaultDate={{value}} and minDate={{value}}, a ...

javascriptangularprimengprimeng-calendar

Learn how to use the Firebase Adapter for Next Auth to easily sign in using your email and password

I am currently using next-auth along with a Firebase adapter for authentication, but I am uncertain about the correct way to sign in users. I do not want to utilize my Google account for signing in; instead, I have user accounts within a Firebase project a ...

javascriptreactjsnext.jsfirebase-authenticationnext-auth

Utilizing Regular Expressions to Substitute 'null' in API Data with a Custom String in JavaScript

I'm working with an API to gather information about books, including the title and author. However, I've noticed that some authors' data is returned as 'undefined'. I had the idea of using regular expressions (RegExp) to replace th ...

javascriptjsonregex

Ways to import JavaScript into child HTMLs embedded within ng-view

I'm diving into angular for the first time and I need to figure out how to incorporate JavaScript into my HTML within ng-view. Some suggestions I came across mention adding jQuery. Can someone provide some guidance on specifically what needs to be ad ...

jqueryangularjs

Managing loading and changing events using Angular, jQuery, and Web API

I am populating a dropdown select using ng-repeat. <select onchange="ChangeMonth()" id="month"> <option ng-repeat="(key,val) in Months" ng-selected="val==ActiveMonth" value="{{key}}"> {{val}} ...

javascriptjqueryangularasp.net-web-api

Automatically adjusting jQuery script now functions on all hyperlinks for seamless resizing

I am attempting to create a rollover script that will resize my social network links when hovered over. The desired effect is for the 32px square icon to expand and display the trailing address. For example, when hovering over the Facebook link, it should ...

jquerycssjquery-animatewidth

Is there a way for me to properly initiate the Material UI Modal from the parent component?

This is the main component: import React from 'react'; import ChildModal from 'ChildModal'; const MainComponent = () => ( <div> <span>Click </span> <a>HERE TO OPEN MODAL</a> <div> ); ...

javascripthtmlreactjsmaterial-ui

CSS tilt effect in Internet Explorer versions 7 and 8

How can I make my rhombus styled menu work in IE 7 & 8? It's currently functioning fine in Chrome, Firefox, and IE9. Any suggestions or solutions would be greatly appreciated! http://jsfiddle.net/C7e7U/ Thank you in advance. Here is the HTML co ...

htmlinternet-explorercss

I have a website hosted on Heroku and I am looking to add a blog feature to it. I initially experimented with Butter CMS, but I found it to be too pricey for my budget. Any suggestions on

I currently have a website running on Heroku with React on the front end and Node.Js on the back end. I want to incorporate a blog into the site, but after exploring ButterCMS, I found the pricing starting at $49 to be too steep for my budget. My goal is ...

javascripthtmlnode.jsreactjsheroku

Adding padding to the navbar when collapsed causes extra space between the brand name and the hamburger icon button in Bootstrap

I am in the process of creating a fixed-top navigation bar for my webpage. However, I have encountered an issue where there is excessive space between the "Brand" name and the collapsed menu icon when viewed on smaller screens. Here is a visual representa ...

htmlcsstwitter-bootstrapnavbar

Submit button on Ajax form causes automatic page refresh

After adding a simple Ajax form to my WordPress website, I encountered an issue where the validation works fine, but instead of sending the email, the form refreshes after submitting. Here is the code snippet: <script type="text/javascript"> jQ ...

javascriptphpajaxwordpressforms

Changing the row property value of a textarea dynamically based on text input in ReactJS

Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: Expected ...

javascriptreactjstypescript

No reaction when utilizing the .post() method in jQuery

I've set up a basic form for users to update their status message. The form is functioning properly, but I'm encountering an issue where I am not receiving any response upon submission (using firebug, the response after submit is empty). Below i ...

phpjqueryajax

What is the process for uploading files with just node.js?

My dilemma involves a webpage featuring a form with a file input field. Upon submitting the form, I wish for the server to write the file on the server side. Despite numerous attempts to upload various test images using this form, each results in a plain ...

javascriptnode.js

Difficulty comprehending the fallback for JSON.parse in jQuery.parseJSON

Check out the origin of $.parseJSON function (data) { if (typeof data !== "string" || !data) { return null; } // Remove leading/trailing whitespace for compatibility data = jQuery.trim(data); // Try native JSON parser first ...

javascriptjqueryjsonparsing

What steps are involved in integrating Element Plus with Nuxt 3?

Seeking assistance with installing Element Plus in Nuxt 3. I followed the instructions from the official Element Plus documentation, but despite adding unplugin-vue-components, unplugin-auto-import, and adjusting webpack settings in the nuxt config file, ...

javascriptvue.jsnuxt.jselement-uielement-plus

Encountering an issue in Laravel when trying to retrieve data using relationships and the paginate() method

When I try to fetch data using paginate(10), Vue.js does not work. However, if I use paginate(5), it works fine. The code in the Controller with relationships in the model files is working fine and returns a 200 OK response. $results = Posts::with([' ...

javascriptphplaravelvue.js

Arrange the element as though it were the foremost

My specific scenario is as follows: <div id="container"> <p id="first">...</p> <p id="second">...</p> </div> I am looking to rearrange the order of second and first within the HTML stru ...

htmlcss

Is the JQuery Mobile .page() method triggering an endless loop?

Creating a dynamic listview with data from an AJAX response has been successful, however, when using JQM's .page() function on it, it appears to enter an infinite loop where the listview keeps getting appended indefinitely. I'm unsure if this is ...

javascriptjqueryjquery-mobiledhtml

Troubleshooting: Why is the AngularUI Modal dialog malfunctioning

I'm currently working on integrating an angularUI modular dialog into my application. Here is a snippet from my controller.js file: define([ 'app' ], function(app) { app.controller('TeacherClasses', [ '$scope', &apo ...

javascriptangularjsangular-ui