As shown below :
https://live-example.bss.design/ (live example)
Whenever I open a modal (by clicking on sign up in the top menu, then on the button), the background shifts because the modal sets the body overflow to hidden.
Is there a way to prevent this from happening?
The background doesn't actually move. When the Modal is open, it applies a specific style to the body:
body{overflow:hidden;}
This disables the scroll bar and causes the window to expand, giving the illusion that the background is moving.
If you prefer not to have this effect, you can use the following code instead:
body.modal-open {
overflow: auto;
}
To eliminate the background motion, simply implement the following code
.modal-open, body {overflow: inherit !important;}
"modal-open" class is applied to the body.
You are required to modify the javascript code responsible for adding the "modal-open" class. It may seem like an unusual request, but it needs to be done :)
To control the modal click event and move the class from the body to another element:
i. Initially, the Modal is placed in the Body and then transferred to another element.
$('#signUpModal').on('shown.bs.modal', function (e) {
$(body).removeClass('modal-open');
$('#otherElement').addClass('modal-open');
});
ii. Additionally, intercept the closing of the modal and execute a second removal:
$('#signUpModal').on('hidden.bs.modal', function (e) {
$('#otherElement').removeClass('modal-open');
});
Follow these steps and everything should work smoothly :)
Is there a way to generate a random value only once and ensure that it remains constant, even when called within a function? If I use the Random method inside a function, the value of 'x' changes every time the function is called due to the metho ...
Welcome to my side menu <template> <div class="p-3 text-bg-dark shadow"> <div class="dropdown"> <a href="#" class=" align-items-center text-white text-d ...
My task is quite intricate. To begin, I have a hidden wrapper div that fades in when the mouse hovers over it and fades out when the mouse moves away. The next step is to include an image div inside the wrapper div. This image div, larger than the wrapper ...
I am currently working on a bootstrap website and encountering an issue with showing/hiding a div, which should be a simple task. The goal is to display the div with ID "menu" when the div with ID "btn" is clicked. Here is the HTML code: <div class=" ...
Attempting to align a Pinterest board to float right is proving more challenging than expected. Any styling modifications applied to the span or Pinterest board result in rendering issues. A task that was supposed to take only 2 minutes has now become fr ...
For the last couple of hours, I've been attempting to replace the image on the login page with something different than a dog. Despite scouring through all the files, both css and scss, and updating the link everywhere, that pesky dog continues to sho ...
Is there a way to maintain the same width for the image and div below? Everything looks good until the window size is between 545px to 575px. The .header width changes only at col-md-12. How can I preserve the aspect ratio? VIEW SCREENSHOT CODEPEN LINK ...
I've implemented the plugin from https://github.com/uxsolutions/bootstrap-datepicker Check out the JSFiddle demo: https://jsfiddle.net/j3b089gr/ In my example, I have the calendar displayed along with the HTML code: <div class="row"> <di ...
import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...
I'm struggling to align two <TextArea> components using material ui and React. Both of them are contained within the same <div> and share the same className. Despite trying to apply the !important rule in CSS, I haven't been able to ...
In my jhipster project, I am utilizing Angular2 and Bootstrap 4. While exploring the jhipster website, I came across a page that explains how to customize Bootstrap variables. However, I am struggling to see real-time changes when implementing these custom ...
Currently, I am in the process of dynamically creating a sidebar that can be collapsed or expanded by simply clicking the menu item. I have tried using <div [innerHtml]="function()"></div> and it works to collapse the submenus as intended. Ho ...
I recently came across a fascinating example on W3 Schools that taught me how to implement a search filter. Below, I have customized it for everyone's reference. I am interested in modifying it to only display a list item with the message: No matche ...
https://i.sstatic.net/iuNB7.png <span id="priority-dot-open-menu"> <span id="priority-menu"> <span class="tooltip-top"></span> <span id="priority-dot-blue">& ...
Recently, I encountered an issue with Chrome. When I applied a z-index of -1 to a position: relative; unordered list, the links within it became unclickable. You can see an example at http://jsfiddle.net/raLnx/ using Chrome 20.0.1132.47m. There is no pro ...
On my webpage, there are 2 buttons - one enabled by default and the other disabled. When I click on an enabled button, their states switch - the enabled button becomes disabled and vice versa. This functionality works perfectly in Chrome, Edge, and IE11, b ...
I recently applied clear:left to a div in my code, but when I tried adjusting the top margin, nothing seemed to change. Take a look at the snippet below: <!DOCTYPE html> <html> <head> <title>Float</title> <meta cha ...
I have a table with buttons that I need to customize for selection, using CSS. The goal is to style the buttons differently than standard checkboxes or radio buttons by using the type "button" and applying CSS/CSS3 styles. <div class="button"> ...
Currently, I am utilizing Bootstrap v3 and encountering an issue while attempting to display a popover programmatically, beside an element, as soon as the page loads. The DOM does not contain any popover markup, so my goal is to generate and display it usi ...
I have menu items on the master page, and if users click on that menu item, I want to show it as active. My goal is to append "Active" to the existing class to indicate that it is active. _Layout.cshtml: <div class="menu-items-navigation"> <di ...