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>

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}"/>

JavaScript reference inside HTML not loading in modal

I have a main page, and I am loading modal dialogs that are stored as HTML in other partial html pages. I am loading modals dynamically into 1 modal in the page on different buttons clicks.
The partial page for my modals look like this for 1 page:
<script type="text/javascript" src="../App/modals.js"></script>
<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="myModalLabel">Specify entity name you wish to create</h4>
</div>
<div class="modal-body">
<div class="row">
<form>
<div class="col-md-6">
<input type="text" id="txtEntityNameCreate" />
</div>
<p class="modal-log"></p>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="AddEntity()">Create Entity</button>
</div>
I am referencing a script at the top which will be responsible for resetting the text field inside dialogs. I might use it for later purposes as well. But the script is not loaded into the page when I am calling the dialog like this from my main page:
<a id="" data-toggle="modal" data-target="#mainModal"
href="modals/createmodal.html"
data-remote="modals/createmodal.html"
onclick="Utilities.SetFocusModal('txtEntityNameCreate')">
<img src="../Images/create.png" />
<h4>Create Entity</h4>
</a>
How can I load the modals.js when the dialog is loaded?
Thanks.

When bootstraps modals are loaded remotely they do not reload the dom so the page is not being reloaded into the modal the html is just being inserted, so your script is more than likely not executing, not really sure what your script looks like but that is more than likely the issue. Bootstrap has a jquery function for when the modal is shown. So if your script functions correctly when you load your html normally, like when you open just your snippets, then you can probably do something like the following on your main page:
$('#mainModal').on('shown.bs.modal', function () {
//then put your script here
});
or maybe
$('#mainModal').on('shown.bs.modal', function () {
$.getScript('path/to/script.js');
});
And then your script will execute when the #mainModal is shown.

Button for modal does nothing when clicked

I created a button that references a modal but it doesn't open the modal at all. This area of code isn't my realm, SQL is. This code actually lives in an SQL procedure that is called when interacting with a website.
Thoughts?
--Remove package item, Modal Popup
<div id="delete_btn_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class=modal-body>
<h3><font color="red" align="center">Are you sure?</h3></font></br>
<p>Deleting a package item will remove the entire package</br></br>
<button type="button" class="btnStyle" data-dismiss="modal">Close</button>
<button type="button" class="btnStyle" onclick=location.href="http://wowfestival.lajollaplayhouse.org/cart/precart.aspx?p=499">Delete Package</button>
</p>
</div>
</div>
</div>
--button
<button type="button" class="btnStyle" data-toggle="modal" data-target="#delete_btn_modal">Delete</button>

Seems you have not added bootstrap javascript
Your code is perfect and fine
Check the bootply for your code. : http://www.bootply.com/zOa8UJ4Vfb
Also check you you have jQuery included as well .
If not use below cdn for quick test.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Minimize or collapse a bootstrap 2.3.2 modal dialog?

Are there a way to add a minimize feature to bootstrap modal dialogs?
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id='dialog-heading'></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
</div>
</div>
I'm using it like a static draggable dialog:
$('#testModal').modal({backdrop:false})
$('#testModal').draggable({handle: ".modal-header"});
Maybe I'm using a wrong widget for that, but what else?
By minimize I mean that, minimize or collapse the dialog like a little
window widget.
Jquery-ui dialogs have a feature like that: http://jsbin.com/ehagoy/154
Why a -1?

Maybe something like:
$(".modal-header").click(function(){
$(".modal-body").slideToggle();
});
Could help you..
if you want a button for that, only change .modal-header for the button id:
$("#mybutton").click(function(){
$(".modal-body").slideToggle();
});