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">×</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)
To make it work, first remove the data-target and data-toggle attributes from the link. You can leave the href attribute there. Using jQuery we can add a click listener to the <a> element, but we do not want to directly go to the page indicated by the href attribute so we use preventDefault() .
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window.
You can implement it by using any other library for example Bulma , by using another framework that uses jquery, for example jqueryui, by using any other javascript library that could implement a modal, or by implementing it using javascript, or even with only css and html.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With