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>
Related
For my project, I want to implement a modal. I am using Bootstrap 4. The modal should work as following:
When I press the button in the first .html page, the button should redirect me to a second .html page, meanwhile open a modal in that second .html page as a welcoming.
So the modal in that case is like a welcoming message as a popup box.
To make things clear. The button "code" is in the first .html file, the modal "code" is in the second .html file.
Button:
<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
data-toggle="modal" data-target="#modalLogin">Prijavi se</button></a>
Modal:
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginLabel">Pozdravljeni!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Dobrodošli v digitalnem gradbenem delovnem listu.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Nadaljuj</button>
</div>
</div>
</div>
</div>
I tried everything. from id's, to trying to relocate the code, to trying to find another solution, with JavaScript, but no luck so far.
A click on your <a> cannot open a modal in another page that is about to be opened. Instead, what you do is you slightly modify the href of your <a>, for example: .
Then, in your JS (that is being loaded with index.html) you can check if there is a 'welcome' in your URL when the user navigates to the page. If there is, you trigger the modal to show. It would look something like this:
$(document).ready(function() {
if (window.location.href.indexOf("welcome") > -1) {
$("#modalLogin").modal("show");
}
});
This way, when the user navigates to index.html the modal doesn't show, but if the user clicks on your button, the modal will be displayed because the URL will contain welcome.
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}"/>
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.
I am working on a project that use bootstrap, in it I need to show modal windows that contain other html page I use the following code
<a class="menuItemManageContent"
href="<%= request.getContextPath()%>/news/index/NEWS/0943ac5b-e556-49eb-acef-a112a56e3e7b/managePortlet.html"
data-toggle="modal" data-target="#modal-table_<%= request.getParameter("instanceId").toString() %>">Manage content</a>
<div id="modal-table_<%= request.getParameter("instanceId").toString() %>" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="white">×</span>
</button>
mange
</div>
</div>
<div id="contentBody" class="modal-body no-padding">
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
the code above work fine , it is showing the modal with my page in it the only part I need to put my content in contentBody so I still have the header for the modal as I design it, my question here is there is an easy way to do that with no javascript, can I tell the data-target to put the page in the contentBody div instead of the default modal content which is override my div.
fine, i got it work I just move the header out of the content and that solve the issue, I will leave this question hopefully it help someone else
I am using Twitter Bootstrap's (v3.1) modal dialog and when I show a dialog and dismiss it, any buttons that were not on the screen when the modal displayed are no longer clickable in IE 11.
As shown in the above illustration, the I have multiple buttons to show modals and they are further down the page than where the modal displays (at the top of the page). The first modal displays properly. However, once I dismiss that modal and scroll back down the page to click on another button, the buttons are no longer clickable.
My button code:
<button type="button" id="btnPreviewSales" name="btnPreviewSales" class="btn btn-default" data-toggle="modal" data-target="#previewSalesModal"><span id="btnSalesPrevImg" class="glyphicon glyphicon-eye-open"></span> Preview Sales</button>
My modal code:
<div class="modal fade" id="previewSalesModal" tabindex="-1" role="dialog" aria-labelledby="previewSalesModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="previewSalesModalLabel">Preview Sales</h4>
</div>
<div class="modal-body">
<img src="preview.jpg" alt="Sales Preview" class="img-responsive" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It works fine in other browsers (Chrome, Firefox) and I have the X-UA compatible tags properly set. What can I do to get the buttons clickable again after dismissing the modal in IE?
Ok, I found a solution. I also noticed that the modal was jumping to the top of the page each time and went looking for a solution to that problem. I found Bootstrap modal: background jumps to top on toggle and the recommended the solution was to override a bootstrap style:
body.modal-open {
overflow: visible;
}