UI-Bootstrap selectively adds modal backdrop to specific elements

I have encountered a unique situation with my application where I am displaying a UI-Bootstrap modal inside a div, positioned above a navigation bar. Typically, when the modal is launched, a backdrop (dimmer) covers the entire background. Interestingly, my modal is not attached to the body element; instead, it is appended to the specific div using these modal options:

appendTo: angular.element(document.querySelector("#mainContent")),
backdrop: true,

You can see an example of this behavior in action on this plunker.

The issue I am facing is that even though #mainContent is nested within the DOM hierarchy, the backdrop dims the entire viewport. Is there a way to restrict the backdrop (or the entire modal structure) to only affect one specific element rather than the whole viewport?

cssangularjstwitter-bootstrap-3angular-ui-bootstrap

Answer №1

To make the backdrop cover only the first parent container without position:absolute, you need to adjust the CSS as follows:

.modal-backdrop {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1040;
    background-color: #000;
}

You can view the implementation on Plunker.

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

Display a unique and unconventional image as a dynamic full-screen background, ensuring the entire image is visible using React/RedwoodJS

Looking for a somewhat unusual solution here - I want to use an image as a background with all edges of the picture visible at all times. Typically, I would use the "cover" setting for this, but that doesn't achieve what I need (image included). After ...

cssreactjsbackground-imageredwoodjs

What is the best way to align text in the vertical center?

Trying to design a promotion layout with an image on the left and text on the right. How can I center the text vertically to appear in the middle of the picture? Attempts using margin and vertical-align have not been successful. Also, why does the text di ...

htmlcss

Adjusting the Size and Spacing of Vuetify's Buttons

Why are buttons extending beyond the card width? https://i.stack.imgur.com/wVRoQ.png I'm facing difficulties customizing the buttons within the cards. I want to eliminate all padding so that the black border perfectly encloses the icon without any un ...

cssvuejs2vuetify.js

Enable the ability to upload multiple images on a single page using droparea.js

I am currently utilizing droparea js for uploading images. However, I have encountered an issue where if I try to upload an image in one of the upload menus, it ends up changing all four upload menus simultaneously. <div class="col-md-12"> ...

javascriptjqueryhtmlcss

What is the process for including CSS in the .ashx.cs code-behind file in ASP.NET?

How can I insert a css class in the .ashx file while the .aspx UI page displays it as a string? What is the method to include css in the code behind of the .ashx page? I would like the text "Cook" to be displayed in red. Problem: https://i.sstatic.net ...

cssasp.netashx

Custom CSS for the Google Maps Circle Object

Currently, I am utilizing the Google Maps Javascript API v3 Circle object to display circles on the map. I am interested in customizing the CSS of this circle by incorporating some CSS animations. Although I am aware that custom overlays can be used for t ...

javascriptcssgoogle-maps-api-3

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

javascripthtmlcss

Stacking the FontAwesome icons on a PrimeNG button

I've been experimenting with various methods to incorporate stacked icons on a pButton in Primeng, but I haven't had any success. Does anyone have a solution that doesn't result in the button being twice its normal height? Here are a couple ...

cssfont-awesomeprimeng

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

htmlcss

One effective way to set up an array in an AngularJS application before the $scope is loaded is to

I'm currently experiencing an issue with my AngularJS application. Within the HTML view, I have a list containing JavaScript objects. <div ng-init="initWeek()" ng-controller="TableController"> <div id="TaskImages"> <div ng-repeat="task ...

angularjs

Add data to a size guide

My coding project involved creating a sizing chart using HTML, CSS, and JavaScript. The chart allows users to select their preferred units of measurement (metric or imperial). I used JavaScript to dynamically update the values in the chart based on the sel ...

javascripthtmlcss

Zooming out on mobile devices on a webpage using Bootstrap 4

After creating a web app and styling it with bootstrap 4, I incorporated a media query to adjust font size and padding on mobile devices. The code snippet used for this purpose is as follows: @media (max-width: 1200px) and (orientation: portrait) { .con ...

htmlcsstwitter-bootstrapbootstrap-4media-queries

Why are traditional Angular dependencies still necessary even when typedefinitions are being used?

I am currently in the process of transitioning my Angular 1.5 project to use TypeScript. The project is compiled with webpack and even though I have included Angular type definitions in my package.json file as shown below, "@types/angular": "~1.5.19", "@t ...

angularjstypescript

Are there any alternatives to ui-ace specifically designed for Angular 2?

I am currently working on an Angular2 project and I'm looking to display my JSON data in an editor. Previously, while working with AngularJS, I was able to achieve this using ui-ace. Here is an example of how I did it: <textarea ui-ace="{ us ...

javascriptangularjstypescriptangular

Order sorting of comments in bootstrap-angular.js

I'm struggling to figure out how to display comments in a specific order by date, author, and rating in the input section. I also want them to be sortable in descending order if -date is typed. Check out this link for more information on comments sor ...

angularjstwitter-bootstrapsortingangularjs-filterangularjs-orderby

Styling the navigation bar using CSS and positioning a <div> element underneath

Struggling to design a navbar using Bootstrap and have a div positioned underneath it that fills the remainder of the page? You're not alone! As someone new to Bootstrap and CSS, this can be tricky. Here's an example of how I created a navbar: ...

htmlcss

What are the best practices for incorporating jQuery animations in Angular directives?

For my website, I crafted a straightforward directive aimed at adding some basic animations to the sidebar. The animations include smooth sliding in and adjusting the width and margin of the content class. My query revolves around the suitability of emplo ...

javascriptjqueryangularjs

Interactive chart embedded within a container

I have recently designed a card using Bootstrap and I would like to include a table with some data in it. However, I am facing an issue where the table data spills out of the card when I reduce the screen size for responsiveness testing. Could someone pl ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

What could be causing the Quasar drawer to overlap the Quasar toolbar in a Vue application?

I am currently utilizing the quasar UI framework and have a main layout file that includes only a toolbar. This toolbar is meant to display across all pages in my application. <template> <q-layout view="hHh Lpr lff" style="backgro ...

javascripthtmlcssvue.jsquasar-framework

When clicking on the side-bar, it does not respond as expected

My website has a menu layout that features a logo on the left and an icon for the menu on the right side. When the icon is clicked, the menu slides in from the right side of the window, and when clicked again, it slides out. However, I am facing two issues ...

javascriptjqueryhtmlcsstwitter-bootstrap-3