Angular UI modal backdrop provides a way to create a customizable

Having trouble with an angular ui modal - a white rectangle appearing between the modal and backdrop. Any suggestions?

        var modalInstance = $modal.open({
            templateUrl:'src/app/shared/confirm-modal.html',
            controller:'ConfirmModalCtrl',
            controllerAs:'vm',
            resolve:{
                data:function(){
                    return {
                        title:'Delete?',
                        message:'Are You Sure',
                        buttons:['OK','Cancel']
                    }
                }
            },
            size:'lg'

        });
        modalInstance.result.then(function(result){
            alert('Operation successful')
        },function(){
            alert('Operation cancelled')
        });

https://i.sstatic.net/HpDeb.png

Answer №1

This bug is commonly encountered when using angular-ui-bootstrap 1.13.0 with angular 1.4, as there were significant changes in $animate in angular 1.4.

To work around this issue, you can disable animations by setting animate:false, but this will cause modal animations to be lost.

If you're facing this problem, consider checking the github issue tracker for possible fixes or temporarily reverting back to angular 1.3 until a compatible version for angular 1.4 becomes available.

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

Combining the jQuery Rateyo plugin with AngularJS for rating integration

I've been working on integrating the Rateyo plugin with AngularJS, but I'm facing an issue in extracting the rating value from the directive. Below are the snippets of my code: EDIT: Check out the functional plunker Controller var app = angula ...

Determining if a component is nested within itself in Angular 6 is a crucial task

My goal is to develop a custom Angular component for a nested navigation menu with multiple levels. Below is an example of how the menu structure looks: app.component.html <nav-menu> <nav-menu-item>Section 1</nav-menu-item> <nav- ...

Issues with the z-index in a dropdown menu

Hey, need a little assistance here. I'm facing an issue with my drop down menu. It seems to always be one layer behind the body, even though I've set the z-index of the menu to 999 and the z-index of the body to -999. Could you please take a loo ...

Issue with Bootstrap table cell not following specified widths

I have implemented a vue app using regular Bootstrap 4 without Vue-Bootstrap. The issue I'm facing is with one of the responsive-tables on my site. Despite trying different methods, including copying a fully functional table, this specific table does ...

What is the best way to display JSON responses from AJAX in separate divs with identical class names?

I've been going through a whirlwind of confusion lately, unable to find a solution after spending over 100 hours on this. I'm reaching out for help in hopes that someone can guide me in the right direction! UPDATE: To clarify my issue and seek a ...

What steps should I take to resolve the problem while in Quirks mode?

My current design includes an element with a width of 200px, along with left and right padding of 100px each. However, I have observed that in IE7, IE8, and Firefox 4, the padding is being added to the total width of the element. On the other hand, in IE ...

Ways to split images and text in list items using CSS

Can the text be formatted in a specific location on the page, separate from the image and heading? This is the HTML code I am currently using: <div class="tab-pane container fade" id="environmental"> <div class="row"> <div class="c ...

Can someone point out the mistakes in my CSS Layout?

I've been struggling to make progress on this task over the past couple of days, encountering roadblocks with no clear solution in sight. The maze of nested divs I'm navigating through might be playing tricks on my mind, so having a fresh pair of ...

default selection in AngularJS select box determined by database ID

Here is the scenario: ... <select ng-model="customer" ng-options="c.name for c in customers"> <option value="">-- choose customer --</option> </select> .... In my controller: $scope.customers = [ {"id":4,"name":"aaaa", ...

There seems to be a problem with displaying two div elements side by side using Html/CSS

Recently, I've delved into the world of html/css/javascript just for fun. I've encountered a little roadblock and I could use some help. In my html code, I'm trying to display two div elements on the same line but for some reason, it's ...

Issue with CSS styles not linking correctly to ejs templates

I'm having trouble linking my CSS stylesheet in my project. I have the CSS file stored in a public folder with a css subfolder within it. Despite trying various methods, I can't seem to get the stylesheet to connect properly. Below is a snippet f ...

Exploring the power of Angular JS and Ionic by parsing data from a JSON

I'm currently developing an App with the IONIC framework and Angular JS, utilizing the Tinder cards feature recently introduced by Ionic (http://ionicframework.com/blog/tinder-for-x/). My goal is to read from a JSON file and use it as storage for my a ...

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

"Fixing the issue of an undefined option being added to

In my controller, I have defined an object called tempScale: $scope.tempScale = { scaleType : [], deviations : [], intervals : 0 }; This object is connected to the HTML through this code: <select id="scales" ng-model="tempScale.scaleType" ...

Display the list items when the page first loads

I currently have this code snippet: <nav> <ul class="sel"> <li> <a href="#LINK1" data-title="A">A</a> </li> <li> <a href ...

Tips for Maintaining Consistent Height and Width of Cards

My latest project involves a code snippet with 3 CSS cards displayed in a row using bootstrap. <div class="container mt-4"> <div class="row"> <div class="col-auto mb-3"> ...

Storing a webpage in HTML with the use of @import function in CSS

I'm looking to save an entire HTML page, but I'm running into an issue with the CSS file that includes the line: import url('someOtherCss.css'); When attempting to save the page using Firefox or Chrome with 'File->Save Page a ...

Issue with unique scrollbar customization tool

To access the plugin, visit: My webpage is still a work in progress: XXX Both divs move simultaneously when scrolling down! I am unfamiliar with jQuery and java, can someone assist me? ...

Guide to dynamically refreshing a section of the webpage while fetching data from the database

I'm currently developing a website using PHP & MySQL where some queries return multiple records. Each record has its own dedicated page, allowing users to navigate between them using arrows. So far, everything is working smoothly. However, I've ...

Choosing a sibling element before another using CSS

Is there a way to make both of my icons display some text when hovered over? I managed to make it work, but the leftmost icon doesn't trigger the span element when hovered. The text needs to appear on the left side of the Yelp icon for design reasons. ...