CODEWITHSUNDEEP
javascriptangularjsbootstrap-modal
EzeTeja
EzeTeja

Reputation: 1305

angular-bootstrap modal on nested view

I'm trying to implement a bootstrap modal directive from here: DOCUMENTATION but for some reason I cannot make it work.

When I click on the button which calls the function, it shows a line over the darker background as you can see here. However you can see the template loaded in the developer tools, check the gif.

You can check my gist with the files.

Any sugestion is welcome.

Upvotes: 0

Views: 418

Answers (1)

Jesus Carrasco
Jesus Carrasco

Reputation: 1354

The problem is in this two divs:

YOUR CODE

<div class="modal fade" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Login / Register</h4>
            </div>
            <div class="modal-body">
                <p>Login Form</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" type="button">Register</button>
                <button class="btn btn-success" type="button">Login</button>
            </div>
        </div>
    </div>
</div>

CHANGE TO THIS

        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Login / Register</h4>
            </div>
            <div class="modal-body">
                <p>Login Form</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" type="button">Register</button>
                <button class="btn btn-success" type="button">Login</button>
            </div>
        </div>

the <div class="modal fade"> is who dont let see the rest of the content.

Upvotes: 1

Related Questions