Bootstrap / Modal alert - log shows with no alert

Question

Basically, the extension I am working on is supposed to show an alert box when clicked. However the button does it's job by going to the next step "skipping verification" without showing the box as it should.

When the button is clicked, I receiving this back from the console.

    $("#usps_skip").click(function() {
        console.log("skipCLicked");
        var msg = "No address information will be stored with the Contact record if you skip USPS  verification. Do you still wish to skip the USPS verification step?";
        $('#errorModal .modal-body').html(msg.split('\n').join('<br />'));
        $('#errorModal').modal('show');
    });

The "skipCLicked" log is showing up in the console, but the actual modal message alert is not appearing. Any suggestions?

Below is my code in the chrome extension.

• js code

    switch(ObjField.id) { //other case code removed since it is not necessary case "usps_skip": str_field = str_field + '<button class="btn btn-danger" data-target="#errorModal" name="'+ObjField.name+'" id="'+ObjField.id+'" value="">'+ObjField.label+'</button>'; //str_field = str_field + '<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#errorModal" name="'+ObjField.name+'" id="'+ObjField.id+'" value="">'+ObjField.label+'</button>'; break; 

• modal / tabs.htm

  <div id="errorModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Error</h4> </div> <div class="modal-body"> <p></p> </div> <div class="modal-footer"> <button type="button" id="modalSkip" class="btn btn-success" data-dismiss="modal">Skip Verification</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>

The button works as it should but no message shows, any help would be appreciated.

Edit: console.log("skipCLicked"); is shown via console, so it works up to that point.

Answer 1

Did You try:

$('#myModal').on('shown.bs.modal', function (e) {
  console.log('is modal open?'); // does it shown in console? if not then modal is not open.
  // do something... like $('#errorModal .modal-body').html(msg.split('\n').join('<br />'));
});

Ps. if console.log('is modal open?') shown in console then You must check why modal is invisible. There can be many reasons, no height/width , to low z-index etc.