Tips for ensuring a modal stays fixed while scrolling

I need help with a pop up modal on my website. I want the modal to stay in place even when scrolling down the page.

Here is the code for my modal:

<div class="modale" id="ouibounce-modal" style="display:none">
            <button type="button" id="pop_up_close" class="close" data-dismiss="modal">&times;</button>
            <img id="pop_up" src="images/caly_popup.png">
</div>

My attempted solution was:

.modale {
    height: calc(100vh - 126px);
    overflow-y:scroll;
  }

Unfortunately, this solution did not work as expected. Can anyone provide guidance on how to make it function properly?

htmlcssbootstrap-4

Answer №1

Check out this solution

  

 .modale {
    height:100vh;
    overflow-y:scroll;
    position: fixed;
    background: red;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    margin:auto;
  
  }
<div class="modale" id="ouibounce-modal">
            <button type="button" id="pop_up_close" class="close" data-dismiss="modal">&times;</button>
            <img id="pop_up" src="images/caly_popup.png">
</div>

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

Exploring the functionality of Jquery with the :active selector

Here is the code I have been working on: $('#ss a:active').parent().addClass('ss-active'); It seems like my code is not functioning as expected. Can you help me figure out how to achieve my desired outcome? Additionally, I want the bu ...

jqueryhtmlcsscss-selectors

How can I modify the parent form element to only evaluate the expression at the text node, without affecting Angular interpolation?

Currently, I am in the process of developing an eCommerce platform and utilizing angular to construct a widget on product detail pages. Unfortunately, my control over the initial HTML rendered for the browser is quite limited. While most tasks related to m ...

javascripthtmlformstemplatesangularjs

Developing Form Validations in Bootstrap (no need for additional plugins)

I am in search of a simple solution for form input validations that doesn't require a full-fledged jQuery plugin. Specifically, I need to keep one input disabled until integers are entered into two other inputs. The following if-loop is my attempt to ...

jqueryhtmlformstwitter-bootstrapvalidation

Styling jQuery Draggable and Droppable <li> elements

I am facing a challenge with my drag and drop functionality using jQuery. While the drag drop feature works perfectly, I need to display two separate pieces of information from a database on each "li" item in different styles. My goal is to include a "tra ...

jqueryhtmlcss

Aligning two flex items vertically

I am working with a flex container called .container and two flex items: item-one and item-two. My goal is to center the first item vertically and anchor the second item to the bottom. Struggling to figure out how to vertically align the first item within ...

htmlcssflexbox

Leveraging AJAX to access a PHP file

I'm currently attempting to access a PHP file that updates a database entry. To ensure that only specific parts of my webpage are updated, I intend to utilize AJAX. Once the PHP file has executed, I aim to modify an image on the triggering page. Coul ...

phpjqueryhtmlmysqlajax

What are some ways to prevent pinch zoom on an HTML webpage?

Searching for a way to disable pinch-to-zoom on an HTML web page has proven to be a daunting task. Despite numerous attempts, I have yet to find a solution that works. I am reaching out in the hopes that you may have the answer. Some of the methods I have ...

htmlcssreactjsnext.js

Having difficulty navigating the website due to the inability to scroll

I am experiencing a problem on this website where I am unable to scroll. Visit www.Batan.io After loading the website for the first time, the trackpad (mac) works fine initially but then the scroll function stops working. Although the sidebar works, chan ...

htmlcssscroll

Struggling with inputting text in an AngularJS application

I am facing an issue with populating a text input with the output of a function in my HTML code. Despite trying different approaches, I am unable to figure out why it is not working correctly. Below is the snippet of my HTML code: <input type="text ...

javascripthtmlangularjs

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

javascriptjqueryhtmlcssangularjs

Having trouble retrieving the URL from JSON data - every time I attempt to access it, it just shows as undefined. Any suggestions

Having trouble extracting the URL from JSON, as it shows undefined. Any suggestions? <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta> <script language="JavaScript" type="text/javascript" ...

javascriptjqueryhtmljson

Transparent CSS Table Styling

Can you create a CSS effect where all content inside a table becomes transparent on hover? For example: <table><tr><td> AN IMAGE </td> <td> SOME TEXT </td></tr></table> So if either the image or the text ar ...

csstransparency

The element ''ag-grid-angular'' is unrecognized:

After using ag-grid successfully for a few months, I attempted to integrate a grid from a previous project into an Angular template like the one found in ngx-admin: ngx-admin This is how the template is structured: https://i.sstatic.net/Mfjw8.png I tr ...

node.jsangulartypescriptbootstrap-4ag-grid

Adjust the element colors within a Vue loop with dynamic changes

Hey there! I'm currently working on achieving a unique design inspiration that involves colorful badges grouped together. Here's a visual reference: https://i.sstatic.net/5LDBh.png In the image, you can see these badges grouped in pairs, but the ...

cssvue.jsnuxt.jsvuex

Is there a way to display an XML listing recursively similar to the functionality of an ASP:MENU in the past?

I have been working on converting a previous asp:menu item to JavaScript. Here is the JavaScript code I have come up with: function GetMainMenu() { var html = ''; var finalHTML = ''; finalHTML += '<d ...

javascripthtmlcssrecursionmenu

Fixed positioning in child element while synchronizing the parent's horizontal scroll with the child element's left position

I have a div with relative positioning that scrolls horizontally. Within this div, I want to include a fixed element that also scrolls along with the parent div but remains at the top because the parent div is a child of a vertically scrolling div. To be ...

htmlcssreactjs

Troubleshooting issue with jquery.backgroundSize.js on Internet Explorer 8

After trying out the jquery.backgroundSize.js plugin, I ran into issues getting it to work in IE8. I followed the steps from the official website and tested on various browsers like IE9 and Firefox, but nothing seemed to happen on IE8. css: #main{ b ...

jqueryhtmlcssinternet-explorer-8pie-chart

Execute a function in HTML that has been declared in the controller

Is there a way to automatically trigger a function when an HTML page is loaded? Currently, the function is manually invoked by clicking a button, as shown below: <p> {{address}} </p> <button class="btn btn-primary checkout" ng-click="g ...

javascripthtmlangularjs

Initiate playing HTML video upon user click

My current situation is quite straightforward. I have an HTML video that plays when I click a div with the class ".play". $('.play').click(function() { $('.video').get(0).paused ? $('.video').get(0).play() : $('.vide ...

htmlvideoclickmp4playback

Tips for retaining the original text value even after clicking the submit button

import java.util.Map; import java.util.HashMap; import javax.servlet.ServletRequest; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org ...

javajqueryhtmljsp