Open Modal (bootstrap) from other html-file

I’m building a website using bootstrap. But i’m come to somewhat of an dead-end. i’ve created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.

<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 class="modal-body">
      <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>

I open this dialog using a button.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >

But i want to keep my modals in seperate aspx/html-files. How can i open these modals when they are kept inside different html/aspx - files ?

if the button is inside index.Html but the modal is inside newTaskModal.html, how would i open the modal? (If both are inside index.html, then there are no problems)

Note: I don’t/can’t use HTML5 (company-standards)


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

if you’re using jquery, you could download the page using an ajax call:

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

If you’re building a single page application you might want to check out a framework designed to solve this type of problem:

Method 2

Can you use PHP? If so there is simple solution.

Your index will be index.php and where you want to have your modal just place this code

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

Method 3

Also you could if you are using JQuery to load your html page into into a matched element.

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

Go to for more info.

Method 4

STEP 1 Use below code for link:

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

STEP 2 Use below code for 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>

STEP 3 Create MyModal.html and place 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 class="modal-body">
Modal Contents
    <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>

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

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x