Check out this demo site to see what I'm referring to:
To view the modal, simply hover over a product and click on the zoom button to display a quick view of the product.
If you keep scrolling down, you'll notice that the gray semi-transparent background stops. This issue seems to happen regardless of the screen size!
Any ideas why this is happening and how it can be fixed?
Please note that this problem doesn't occur on the foundation website:
The team at Zurb made a surprising change by switching the default position from fixed to absolute, causing confusion for some users. However, they eventually decided to revert back to the fixed position.
This update was rolled out in version 5.5.1 https://github.com/zurb/foundation/commit/45f9b407ffeeca4b44c5a2afde4f0e58abf4bb78
Make sure to update your system to benefit from these changes :)
After some investigation, I managed to resolve the issue at hand. It turns out that in the _reveal.scss file, the position was strangely set as absolute. There was a comment explaining that it allows the modal background to extend beyond window position with the mixin, but this was clearly incorrect.
All I had to do was update position: absolute to position: fixed, and now everything is working perfectly!
If you have any insights on why the developers made this decision, feel free to share them in the comments section.
I've tried many different approaches, but I'm struggling to figure it out. In my code below, the h1 and h2 elements have a gold and black background respectively. Although I've set their width to 500px, they are stuck at the top left corner ...
Despite my efforts in the CSS file, I am still struggling to get the container to take up the full width on mobile devices. Here is my CSS code: @media (max-device-width: 1024px) { .col-sm-2{ width: 100%; } .container { margin: 0 auto; width: ...
I'm currently working on implementing datatables and I'm facing an issue with populating my data table using an AJAX call. Here is the snippet of my AJAX call: $('#call_analysis_basic_table').DataTable ({ "ajax": { "url": " ...
Exploring My Demo Page, I am attempting to design a button that will serve as a closure mechanism for modals. The code snippet I experimented with is as follows: x=document.createElement('button'); x.className='superclose'; Referencin ...
I need to create a slider that adjusts the size of the dot based on the value input. For example, when the value is 1, the dot size should be 10px and for a value of 100, it should be 100px. Is there a way to dynamically change the height of .slider::-web ...
I am new to jQuery and seeking help without harsh judgment. My goal is to make the header fixed when scrolling down 300px on the page, and remove the fixed position if less than 300px. Additionally, I would like to animate the header by sliding it down whe ...
Is there a way to eliminate the space above and below the mandatory span, specifically when using << within it? The height of the field row is determined by the default line-height for the text size, but the mandatory field is taller due to its larg ...
I have several images displayed on a single page. When each image is clicked, I want a dialog box to open. I currently have 6 instances of this setup in my HTML. However, when I click on an image, all 6 dialogs pop up with the same information as the first ...
Could you please assist me in making these two buttons stick to the edge of the div using bootstrap grid? If possible, could you also provide some explanation? I am currently trying to grasp how bootstrap grid works... Here is my progress so far: https:/ ...
I've exhausted all my options in trying to find a way to trigger a button that saves the page upon exit, but it never seems to work. I need the event to occur even if the button is not visible at the time of the page exit. The new security protocols o ...
I recently set up a table with 12 rows and 2 columns, containing various contents. I am looking to add borders to the table, but with a unique twist - after every set of 4 rows, I want to make the horizontal border thicker than usual. Does anyone know ho ...
My script contains multiple AJAX functions that call the same php_ajax.php file. In the php file, I determine which code to execute by checking which $_GET or $_POST variables are set. There are two issues: 1) One function sends $_GET['lang'] t ...
Implementing Google Map API to calculate the distance between departure and destination locations has been successful so far. However, I am encountering an issue with displaying the distance value in a Bootstrap modal after clicking on the Get the Distance ...
If you want to view my jsfiddle, click here The issue that arises when checking the demo on jsfiddle is related to entering a number in one of the text inputs (question 1). Although it performs the calculation correctly, the displayed answer in the column ...
I seem to be facing a terminology dilemma. Currently, I have a database with values stored in a table that need to be displayed in a select drop-down on a web interface. The technology stack includes SQL Server, ColdFusion, and JavaScript, mainly jQuery. ...
In my latest project, I am developing an HTTP server in C++ and using jQuery to send Ajax POST requests to it. One specific page includes a form that is submitted with the following code: $('#create-event form').submit(function(e) { var pos ...
As a beginner in using AJAX, I am facing some challenges with it. Can someone provide assistance? My issue is related to a dropdown selection that should trigger the printing of queries in a table's tbody. Below is my code snippet: The PHP code: < ...
I developed a custom tool and utilized z-index to position it above all other elements: .customTool { position: fixed; z-index: 99999; } However, this functionality stops working when a modal <dialog /> element is opened in modal mode. As a res ...
I've been pondering this dilemma for quite some time now. I have a block of jQuery code that executes an AJAX post to a URL within the website when the user navigates away from the current page they are on. The issue arises when I'm on the URL c ...
I'm new to HTML and CSS, currently working on designing a website for our conference. I've implemented a toggle effect for displaying the information about invited speakers along with their research interests using the following code: <!DOCTY ...