Trigger Modal with a function

Hi!
I need to trigger a model ( #MyModal ) from inside a WebGL Application.
I've tried to call it in a "bootstrap style":
$('#myModal').modal();
But i doesn't trigger that modal - the screen got darkened but the modal doesn't show up.
$.magnificPopup.open('myModal1'); throws an Type Error: c is undefined.
Is in canvas a different function called to trigger a modal ?

Would be awesome if you know a solution :-D

Thanks for the quick response :-) Both methods don't work unfortunately ...hmmm

Just to be sure because i'm probably the worst JS Coder on earth:

I've made the HTML stuff with canvas ( inclusive the modal ):

The Modal works fine when opening as usual:

a href="#myModal1" data-lightbox="inline" class="button button-large button-rounded">Modal</a>

<!-- Modal -->
			<div class="myModal1 mfp-hide" id="myModal1">
				<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
					<div class="center" style="padding: 50px;">
						... my modal stuff
					</div>
					<div class="section center nomargin" style="padding: 30px;">
						<a href="#" class="button" onClick="$.magnificPopup.close();return false;">close</a>
					</div>
				</div>
			</div>

Trying to open it via Script ( within my HTML Code NOT from my WebGL App! ) - Bootstrap Style: darkened screen but no modal, JS method throws a Script Error

<button onclick="goModalBoot()">Boot Style</button>
<button onclick="goModalJS()">JS Style</button>

<script>
function goModalBoot(){
			$('#myModal1').modal('show');
		}
function goModalJS(){
			$('.myModal1').magnificPopup('open');
		}
</script>

Got it finally running. Your JS Method works fine when using "pure" bootstrap code for the modal - awesome!!

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" 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">&times;</button>
        <h4 class="modal-title">Modal 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>

While modals from the canvas modals template won't - strange.

Thanks for your help!