Develop Reference

Load Bootstrap Modal content only when it has been opened

I'm using Bootstrap Modal to load lightboxes with some resource-heavy content.
But the content is loaded immediately with the page. And since there's several lightboxes it slows the page down significantly.
I want the content to load only when the modal button is clicked. But I don't want to call the modal code from a separate page, since that would complicate everything.
Is there some way to use JS or AJAX to load the modal content only when the modal box opens?
Somehow trigger it to load when the button is clicked and then turn the content off, when the box is closed.
Also bear in mind that I don't know almost anything about JS or AJAX.
--EDIT: It would be great if the same solution could be applied to tabbed content--
The code I'm using:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe width='100%' height='368' src='#' frameborder='0' allowfullscreen></iframe>
</div>
</div>
</div>
</div>

Bootstrap modal on page load is not happening

I have a login/signup modal it is working fine,but i need to open the modal when the page loads
I have taken the code from here
I have changed my code like this and i need to open the reset password modal when the page loads.
Modal Code
<div id="cd-reset">
<div class="row">
<div class="col-md-8 col-md-offset-2 Mask2" align="center">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load',function(){
$('#cd-reset').modal('show');
});
</script>
but its not working. when I load the page it does not display the modal/popup
can anyone suggest me how to do.
Thanks in advance.

Ideally the bootstrap modals need certain classes to give you the feel. You need to use the exact classes to get the modal pop-up. Also, in your code there is no content (text) and thus why you're not seeing anything.
Code should look like below.
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<p>Some text in the modal.</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

thymeleaf fragments - html modal for confirmation dialog

I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!

The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>

strange symbols in modal instead of content

we created a website where we want to show some examples of our cards as thumbnails, but when you click on it a larger picture should be displayed in a modal window. Now locally (windows machine) it works perfect, but once hosted (linux machine) the whole content (title, markup, picture, buttons) of the modal are displayed as a set of strange symbols.
The code of the modal:
<div class="col-md-4">
<a href="images/JUNO-FOTO-MW.png" class="thumbnail" data-toggle="modal" data-target="#ModalJUNO">
<img src="images/JUNO-FOTO.gif" alt="geboortekaartje Juno" style="width:200px;height:200px">
<p>geboortekaartje </br>Juno</p>
</a>
</div>
<!-- Modal -->
<div id="ModalJUNO" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Geboortekaartje Juno</h4>
</div>
<div class="modal-body">
<img src="images/JUNO-FOTO-MW.gif" title="geboortekaartje Juno" alt="geboortekaartje Juno wil nu eventjes niet laden" width="850" height="850">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The result of the hosted site
A part of the result:
Since it is not only the picture but the whole modal that is displayed like this, it does not seems like it is an encoding problem.
Any help is greatlty appreciated!

Remove href from your <a> tags.
I debugged bootstrap.js and found, that jQuery.load function is used to load modal's content.
Take a look at
http://getbootstrap.com/javascript/#modals-options
Read about remote option.

Open a div in parent window of iFrame

I have a page which has an iFrame to another page and what I am looking for is to click a button with this code inside the iframe:
<td class="id-center">
<div class="bs-example">
<a id="comments" href="comments.php?id=$id" name="comments" value="$id" data-toggle="modal" data-target=".bs-example-modal-lg\" class="btn btn-primary btn-default center-1"><span class="glyphicon glyphicon-comment"></span></a>
</div>
</td>
which can then open the following overlay pop up box in the parent window:
<!-- Large modal -->
<div style="width:90%;" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myLargeModalLabel">Add a comment</h4>
</div>
<!-- Body of popup -->
<div class="modal-body">
Test
</div>
</div>
</div>
</div>
I'm doing this with Bootstrap 3. Any help would be appreciated!

One way you could go about this is to open the modal through bootstrap's javascript api. The key to making this work is to use the iframe's parent attribute to access the parent document. You can check out this JSFiddle to see what I mean. Unfortunately it's set up kind of strangely because the iframe can't access JSFiddles javascript window (or I just don't know how), but the content you would see in the iframe is embedded in its property srcdoc. Let me know if any of this needs any explaining.

window.document.body.insertAdjacentHTML('afterbegin', "<div id='overlay' style='height: 100em;background-color:#000; opacity:0.4; width: 100%;z-index: 1000;position: fixed;'><div style='height: 100%;width: 70px;margin: auto;'><img src='/spinner.gif' style='height: 70px;margin-top: 40vh;'/></div></div>")
This will add overlay to your parent body but this will work only if both the pages in the same domain.