How to open a modal using angular (without ui bootstrap)?

Question

I have been trying to make make the modal appear, but have failed to do so after multiple attempts.

Here is the code for the modal:

<!-- Login modal -->   
<div class="modal fade" id="login_2" tabindex="-1" role="dialog" aria-labelledby="myLogin" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-popup">
                <a href="#" class="close-link"><i class="icon_close_alt2"></i></a>
                <form action="#" class="popup-form" id="myLogin">
                    <div class="login_icon"><i class="icon_lock_alt"></i></div>
                    <input type="text" class="form-control form-white" placeholder="Username">
                    <input type="text" class="form-control form-white" placeholder="Password">
                    <div class="text-left">
                        <a href="#">Forgot Password?</a>
                    </div>
                    <button type="submit" class="btn btn-submit">Submit</button>
                </form>
            </div>
        </div>
    </div><!-- End modal -->

What I want to do is to load this modal automatically if a certain variable is set in $stateParams in the controller. Otherwise, it should remain hidden. I have tried angular.element('login_2').modal() without success

pr0gramista · Accepted Answer · 2016-08-16 18:43:08Z

1

Use ng-show link to documentation.

You can make something like:

<div class="modal fade" ng-show="showMyModal" ...

And a checkbox for controlling it (but you can do anything)

<input type="checkbox" ng-model="showMyModal">

Remember that you can animate ngShow with ngAnimate.

answered Aug 16, 2016 at 18:43

pr0gramista

9,0783 gold badges41 silver badges52 bronze badges

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

Comments

csschapker · Accepted Answer · 2016-08-16 19:27:08Z

1

If you're open to using an existing library (that isn't ui bootstrap), I recommend ngDialog. You can use custom HTML templates and styles and it's just for creating modals.

answered Aug 16, 2016 at 19:27

csschapker

1297 bronze badges

Comments

Marko · Accepted Answer · 2016-08-16 18:42:55Z

0

Just toggle it like this.

$('#login_2').modal('show');

answered Aug 16, 2016 at 18:42

Marko

1281 gold badge1 silver badge12 bronze badges

Collectives™ on Stack Overflow

How to open a modal using angular (without ui bootstrap)?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related