1

I have a SignIn button, which opens a modal in which I used ng-include to show another html page in that modal. See the code below:

<div class="modal fade" id="loginpop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div ng-include="'views/newlogin.html'"></div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

Now in "newlogin.html", I have a link as shown below:

<a href="/forgotpassword" onclick="$('#loginpop').modal('hide')">Forgot Password</a>

On clicking it,should redirect to /forgotpassword page,which is working correctly but the modal backdrop stays. You can see it here.

I tried many solutions like

data-dismiss="modal"

and also

$('#loginpop').modal('hide')

none of them worked for me. Please provide something.

Thanks in advance.

I'm new to stackoverflow, so kindly overlook any discrepancies.

Yashwanth M
  • 446
  • 4
  • 13
  • 2
    i think its a typo.. Shouldn it be `$("#loginpop").modal("hide")` rather than `$('#modalpop').modal('hide')` ? – Panther Oct 25 '17 at 06:39
  • yes, thanks for letting know, i just corrected it in question. – Yashwanth M Oct 25 '17 at 06:43
  • you mean to say the issue still is present ? – Panther Oct 25 '17 at 06:44
  • yes, it is. I'm still getting the backdrop. – Yashwanth M Oct 25 '17 at 06:49
  • When you click on the link, the modal code is removed and hence i hope bootstrap could not find a reference to it. This could be your solution. Try forcing it to close as he does. https://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear – Panther Oct 25 '17 at 06:50
  • Well, i tried those but, as you can see i am using _ng-include_ in my modal, the script code doesn't work as it is inside the _newlogin.html_ . – Yashwanth M Oct 25 '17 at 06:57
  • In that case, try to declare a method in scope and call the required jQuery methods from the scope method. – Panther Oct 25 '17 at 07:03

1 Answers1

1

I could finally use a script to solve the issue above.

I included:

$('#modal-clear').click(function(){
$('#loginpop').modal('toggle');
$('.modal-backdrop').remove();

the above script in the newlogin.html page where i have the links. I added id=#modal-clearto the /forgotpassword link and boom!

Now its working.

Yashwanth M
  • 446
  • 4
  • 13