Ionic javascript data-dismiss bootstrap modal not working

Question

I'm trying to write a function in JavaScript that opens an model when a player enters a certain box. The model does pop up, but it no longer closes.

This is used to open the model :

The JavaScript:

superFight(){
function ModalLink(){
  $('#myModal').modal('show');
}

ModalLink();
}

The HTML Model:

<div id="myModal" class="" role="dialog">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title">Modaldd Header</h4>
    </div>
    <div class="modal-body">
     <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>

I already tried to use $('#myModal').modal('hide'); and $('#myModal').modal({ show: false});

This did not work. When I put it in the console, it gave :

> $('#myModal').modal({ show: false});
< false = $1

I also tried an onClick function in the close button to activate a function to close the modal, but this not work either.

Basically what I'm trying to do, is to open and close an modal programmatically. Whenever an superFight(); is started, it should pop up with some info. And the user should be able to close it when done.

I'm writing the code in an ionic app.

Answer 1

Figured it out.

I changed the code in superFight() to:

function superFight(){
  $('#myModal').show();
  $('#myModal').modal('show');
  $( ".simplemodal-overlay" ).show();
}

Added an onClick the HTML:

<button type="button" class="close" data-dismiss="modal" onclick="CloseModalSpel()">&times;</button>

And then in the page, I added this function at the bottom:

function CloseModalSpel(){
  $('#myModal').hide();
  $( ".simplemodal-overlay" ).hide();
}

It now opens, and closes the modal.