Bootstrap Modal remains on back button click - mobile only

Question

On mobile devices, the Bootstrap 3 modal remains when I hit the back button.

Here's my html code:

<a id="link-prof" href="" class="dark-blue" data-toggle="modal" data-target="#leavingModal">Link Here<span class="glyphicon glyphicon-chevron-right"></span></a><

<div id="leavingModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <a class="close-btn" data-dismiss="modal"></a>
            <div class="modal-body">
                <h4 class="modal-title">You are now leaving this page</h4>
                <p>Text here and here</p>
            </div>
        <div class=" text-center">
            <button type="button" class="btn btn-lg btn-link" data-dismiss="modal">Cancel</button>
            <button id="link-hcp" type="button" class="btn btn-lg btn-danger" data-dismiss="modal" data-href="http://www.anotherpage.com" data-target="_self">I Agree</button>
        </div>
    </div>
</div>

I also have this in my JavaScript file (not sure if it has any impact on the problem):

$('button').on(touchClick,function(){
    var loc = $(this).attr("data-href");
    if(loc!='' && loc!=null) window.location = loc;
});

When I click on a link, the modal appears. I then click the "I Agree" button on the modal, and am taking to a new page. On a desktop, when I hit the back button, the modal is no longer there. I would have to click the link again for the modal to appear (which is desired). However, on a mobile device (I tried an iPad and Android), the modal remains when hittting the back button.

After some research, I came across this code:

$('#leavingModal').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

...but it doesn't even fire. I tried different selectors also with no success.

I'd appreciate some help in determining a solution.

Thanks.

Stephen

Shehary · Accepted Answer · 2015-08-18T12:28:25.677

0

To destroy bootstrap 3 model completely you can do like this

$("#leavingModal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

Or

$("#leavingModal").removeClass('fade').modal('hide')

Note: Transition effects on the modal can cause the problem, you'll need to remove .fade class from modal to hide it completely.

edited Aug 18 '15 at 12:28

answered Aug 18 '15 at 12:18

Shehary

9,926
10
42
71

Unfortunately, neither of these solved the problem. The modal remained. I manually removed the fade from my html also. – Stephen Aug 18 '15 at 14:28
can you provide the link – Shehary Aug 18 '15 at 17:38
It's on an Intranet, so I'd have to recreate a test version. Regardless, I was able to resolve the problem by "killing" the modal (using the second method above) before it goes to the next page. That worked fine. Thanks. – Stephen Aug 19 '15 at 17:37

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

We encountered this problem in Web and Mobile Application developed using AngularJS_v1.4.7 and Bootstrap_v3.0. It was fixed as explained in below link. See if it is relevant for you.

https://stackoverflow.com/a/34351848/1069893

edited May 23 '17 at 12:30

Community

1
1

answered Dec 18 '15 at 09:03

Gaurang Patel

4,310
6
27
32

Bootstrap Modal remains on back button click - mobile only

2 Answers2