angularjs twitter bootstrap modal not showing

Question

When I click on the defined button below, the modal box doesn't show. If I use the chrome developper tool, I see that my div "modalDisplay" is populated with my modalDisplay.html content, but when I click the button, nothing happens, no error, just nothing. I am using angularjs with the angularjs bootstrap plugin

In my partial view I have the following:

<div id="modalDisplay" class="modal hide fade" ng-include="'./app/templates/modalDisplay.html'"></div>

<button class="btn btn-primary" href="#modalDisplay" data-toggle="modal" ng-show="displayType=='Customer'">
Show Modal
</button>

In my modalDisplay.html

<div ng-controller="mODALCtrl" class="ng-scope">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>My modal</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
        <div></div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
    </div>
</div>

massintha · Accepted Answer · 2013-08-07 18:40:38Z

6

It's normal, you should use directive for this components.

You can use angular-strap directives http://mgcrea.github.io/angular-strap/#/modal or angular-ui http://angular-ui.github.io/bootstrap/#/modal

answered Aug 7, 2013 at 18:40

massintha

2141 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sarath2 · Accepted Answer · 2013-09-01 04:53:22Z

2

Use https://github.com/sarath2/ngEkathuwa

It support Bootstrap 3 and angular 1.2

eg1: stylish with 80% width

    $ekathuwa.modal({
        id:"yourModalId",
        contentStyle:"heigth:400px;background-color:#1b78f7;",
        contentCustomSize:80
     });

eg2: Stylish with pre-defined sizes /df= Bootstrap's default modal width/
sm= small width/
md= medium width/
lg= large width/
fl= full width

    $ekathuwa.modal({
        id:"yourModalId",
        contentStyle:"400px;background-color:#1b78f7;",
        contentPreSize:'lg'
     });

answered Sep 1, 2013 at 4:53

sarath2

812 bronze badges

2 Comments

gerasalus Over a year ago

Wanted to try this library today via bower.But why does your github repo size is more than 17 MB? That is because for some reason, you pushed your node_modules...

Martin Wawrusch Over a year ago

gerasalus , don't be rude. He did not have to push it at all.

Collectives™ on Stack Overflow

angularjs twitter bootstrap modal not showing

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related