Databases
StackOverflow2013
Postsdbo
POHow do I integrate the bootstrap-modal plugin with AngularUI Bootstrap
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I integrate the bootstrap-modal plugin with AngularUI Bootstrap
    text
    copied!<p>I'm in the process of migrating a jQuery based web application over to AngularJS. I'm having trouble integrating the <a href="https://github.com/jschr/bootstrap-modal" rel="nofollow">bootstrap-modal plugin</a> with AngularUI Bootstrap. The bootstrap-modal plugin offers a few features that I need: full-width modals, responsive design, and stackable modals.</p> <p>I've made a basic attempt at integrating the two on <a href="http://plnkr.co/edit/stxyvVPYgzmlSNgUam3X?p=preview" rel="nofollow">plunker</a>. Note that the modal appears to be full-width when the window width is small. But if you pop out the plunker preview window and increase the window width past ~979px, the modal drops down half the page. I can see in the bootstrap-modal source code that the CSS sets the modal to "top: 50%" but then the JS is supposed to set a negative margin-top based on the modal height so the modal gets vertically aligned in the center of the page. The JS isn't getting called properly so the modal is skewed towards the bottom of the page.</p> <p>Code snippets from plunker below.</p> <p><strong>HTML:</strong></p> <pre><code>&lt;div ng-controller="ModalDemoCtrl"&gt; &lt;button class="btn" ng-click="open()"&gt;Open me!&lt;/button&gt; &lt;div modal="shouldBeOpen" close="close()" options="opts"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" ng-click="close('edit')" class="close" data-dismiss="modal"&gt;x&lt;/button&gt; &lt;h3&gt;I'm a modal!&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;ul&gt; &lt;li ng-repeat="item in items"&gt;{{item}}&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn btn-warning cancel" ng-click="close()"&gt;Cancel&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>JavaScript Controller:</strong></p> <pre><code>angular.module('plunker', ['ui.bootstrap']); var ModalDemoCtrl = function ($scope) { $scope.open = function () { $scope.shouldBeOpen = true; }; $scope.close = function () { $scope.closeMsg = 'I was closed at: ' + new Date(); $scope.shouldBeOpen = false; }; $scope.items = ['item1', 'item2']; $scope.opts = { backdropFade: true, dialogFade:true }; }; </code></pre> <p>The alternative approach looks to be not using AngularUI Bootstrap and just code in the modal HTML using bootstrap's normal method. I found this <a href="http://jsfiddle.net/demettry/rYrFt/" rel="nofollow">jsFiddle</a> that does exactly that while still using AngularJS. I'd prefer to use the AngularUI method if possible.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload