Open Modal (bootstrap) from another html file

Question

I am creating a website using bootstrap. But I have come to a standstill. I created a modal from this example (see below). As you can see, this is modally taken directly from their site.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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" id="myModalLabel">Nieuwe Taak toevoegen</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

I open this dialog with a button.

<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >

But I want to keep my modals separate aspx/html-files. How can I open these modals when they are stored inside different ones html/aspx - files?

Example: if the button is inside index.Htmlbut modal inside newTaskModal.html, how would I open a modal? (If both are inside index.html, then no problem)

Note. I can not / can not use HTML5 (company standards)

Answer 1

jquery, ajax:

$.ajax({
  url: 'newTaskModal.html',
  dataType: 'text',
  success: function(data) {
    alert(data);
    // todo:  add the html to the dom...
  }
});

, , : durandal

Answer 2

PHP? , .

index.php ,

<?php include "newTaskModal.html"; ?>

Answer 3

, JQuery html- .

$( "#result" ).load( "ajax/test.html", function() {
    alert( "Load was performed." );
});

http://api.jquery.com/load/.

Answer 4

1 :

<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>

STEP 2 Use the code below for the modal window

    <div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog model-sm">`enter code here
        <div class="modal-content"> </div>
    </div>
</div>

STEP 3 Create MyModal.html and put some text.

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Title</h4>
</div>
    <div class="modal-body">
Modal Contents
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success">OK</button>
    </div>

Note. This may not work with local html. only works on the server!