Menu
I've met some problems when I try to use Bootstrap Modal in my code.
HTML:
<a href="http://another.page" data-toggle="modal">Another Page</a>
or
<a href="http://another.page" data-toggle="modal" data-target="#myModal">Another Page</a>
I'd like to modal another.page to my page, but it doesn't work.
the another.page is looks like:
<html>
<body>
<div id="myModal" class="tm-modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="tm-modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h6>Modal Heading</h6>
</div>
<div class="tm-modal-body">
<p>One fine body
<85>
</p>
</div>
<div class="tm-modal-footer">
<button class="tm-btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="tm-btn tm-btn-recommand">Save changes</button>
</div>
</div>
</body>
</html>
I don't want to load the another.page as a <div> in my code, because there are too many place that I need to use modal.
Did I missed something important?
Thank you very much.
320
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. data-target="#myModal" points to the id of the modal.
To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show. bs. modal . You may also want some CSS to handle the backdrop overlays.
Load Dynamic Content from Database in Bootstrap ModalBy clicking the Open Modal ( . openBtn ) button, the dynamic content is loaded from another PHP file ( getContent. php ) based on the ID and shows on the modal popup ( #myModal ).
createElement('div'); modal. classList. add('modal'); modal.id = 'modal'; modal. hidden = true; modal.
Make use of the element iframe
<div class="modal-body">
<iframe src="another.page" />
</div>
And maybe you want to style it
.modal iframe {
width: 100%;
height: 100%;
}
http://jsfiddle.net/u29Tj/3/
Just to be clear, that you read the manual, based on your comments:
Look at the data-target attribute of your link: It is an anchor to the HTML Element Modal Window. You need this for Boostrap to show and hide the window. You should not linking it to your page. You need to link it to your Modal! In the Modal Body you use the Iframe.
<!-- trigger modal -->
<a data-toggle="modal" href="#myModal">
Launch demo modal
</a>
<!-- Modal -->
<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">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="http://stackoverflow.com/questions/23801446/bootstrap-modal-from-another-page/23801599" />
</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>
Alternative
Homework for you:
data-iframemodal Attribute you want to have a Iframe.data-iframemodel:
29
Do you want from the page 1 open the page 2 and than open the modal inside this second page? if yes, here is a solution:
At the first page you'll use:
<a href="second.html#myModal" class="btn btn-primary"> Open Modal </a>
At the second page you'll insert your modal and the follow script:
(function() {
'use strict';
function remoteModal(idModal) {
var vm = this;
vm.modal = $(idModal);
if (vm.modal.length == 0) {
return false;
}
if (window.location.hash == idModal) {
openModal();
}
var services = {
open: openModal,
close: closeModal
};
return services;
// method to open modal
function openModal() {
vm.modal.modal('show');
}
// method to close modal
function closeModal() {
vm.modal.modal('hide');
}
}
Window.prototype.remoteModal = remoteModal;
})();
$(function() {
window.remoteModal('#myModal');
});
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
