Question

-1

Open Modal (bootstrap) from other html-file

rated 0 times [ 3] [ 4] / answers: 1 / hits: 21850 / 10 Years ago, fri, may 2, 2014, 12:00:00

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>

      <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 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 ?

example:
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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

katharinek

Add To Favorites

Follow

Total Points: 302

Total Questions: 105

Total Answers: 123

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

answered 10 Years ago marisela · Accepted Answer

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

$.ajax({

  url: 'newTaskModal.html',

  dataType: 'text',

  success: function(data) {

    alert(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:
durandal