CODEWITHSUNDEEP
angularangular-ui-bootstrapbootstrap-modal
Alex Liosatos
Alex Liosatos

Reputation: 341

Bootstrap Modal Freezes Page After Closing

Not sure why, but my Bootstrap Modal is freezing my screen after I hit the Close button. Bootstrap version is 3.3.6

Modal code:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" !important>
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit Message</h4>
            </div>
            <div class="modal-body">
                <textarea class="form-control" rows="10" ng-model="msg.message" required autofocus style="max-width: 100%;">{{msg.message}}</textarea>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-default" ng-click="controller.edit(msg)">Edit And Close</button>
            </div>
        </div>

    </div>
</div>

Button click calling modal:

<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-pencil"></span></button>

Method being called on close:

public edit(message) {
    console.log(message);
    this.$http.put(`api/causemessage`, message).then((res) => {
        this.$state.reload();
    });
}

If anyone can help diagnose this problem, it would be much appreciated!

Upvotes: 3

Views: 7483

Answers (5)

Nusri Nalir
Nusri Nalir

Reputation: 63

in Angular with Bootstrap, i faced the same issue. freezing occurs when <modal-container> </modal-container> is not removed, even when we call bsModalRef.hide()

i used below method as a work-around and it solved my issue. use the below code after bsModalRef.hide()

var element = document.getElementsByClassName("freeze-resolve");
var i;
if(element && element.length>0){
  for (i = 0; i < element.length; i++) {
    element[i].parentElement.remove();
  }
}

freeze-resolve class should be used with bsModalService.show()

ex:

  this.ModalRef = this.bsModalService.show(modalToShow, {
  class: 'modal-lg modal-class freeze-resolve',
  animated: true,
  keyboard: true,
  backdrop: true,
  ignoreBackdropClick: true
});

Upvotes: 0

Akash Pawar
Akash Pawar

Reputation: 9

I was also facing same problem and my issue was after modal hide screen freezes and user can't do anything . Below is the code that worked for me.

$("#modalId").modal('hide'); 
$('.modal-backdrop').remove();

Upvotes: 0

Shaan
Shaan

Reputation: 483

I had the same issue in Bootstrap 4.

I took the following steps:

  1. Assign the Id to button instead of data-target

  2. Trigger modal using jquery

     $('#button-id').on('click', function() {
  $('#modal-id').modal('show'); 
     });

  3. Then, followed this answer bootstrap 4 modal-backdrop style (specific modal)

My issues is resolved.

Upvotes: 0

wastetime909
wastetime909

Reputation: 1342

For Bootstrap 4

Not sure if anybody still looking for answer for this issue. Had a similar problem. I used jquery to

$("#modalId").modal('hide'); 
$('.modal-backdrop').remove();

and this only close the modal and remove the backdrop(shadow), however, the page is still frozen. This is because the is changed to <body class='modal-open'> Need to add another jquery to remove the class='modal-open' to make the whole page scrollable again.

Upvotes: 4

Ashwin
Ashwin

Reputation: 211

Try using the following script in method you call on close..

$('#myModal').modal('hide');

Upvotes: 2

Related Questions