I am trying to display modal window when a users sessions times out. When the user times out they will get redirected back to the index.cfm?sessiontimeout page. I have the following code in the index.cfm page to fire IF the URL variable exists:
<cfif structkeyexists(URL,'sessiontimeout')>
<script>
//alert('Your session has timed out.');
$('#appTimeOut').modal('show');
</script>
</cfif>
All that happens is I see the modal background but not the modal window. However when I add it as a link in the nav (for testing), it works perfectly.
<a href="##" title="Feedback" data-toggle="modal" data-target="##appTimeOut">
Here is the modal window code:
<div class="modal fade" id="appTimeOut" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h4 class="modal-title">SESSION TIMOUT</h4>
</div>
<div class="modal-body">
Your session has expired.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I've tried moving the and the modal window code between the two pages (index.cfm and header.cfm). Header.cfm is called within index.cfm. Either way, the javascript function doesn't display the modal window as expected. Any help would be greatly appreciated.
Related
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>
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 need show modal window (bootstrap) only one time, at first login to site.
What I cant do that?
Modal window
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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="myModalLabel">Przeczytaj zanim zaczniesz!</h4>
</div>
<div class="modal-body">
..........................
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS
$(window).load(function () {
$('#myModal').modal('show');
});
Embed a variable in jsp from server side (idk whether you are using a framework) simply;
request.setAttribute("isLoginPage", true);
and assuming that you are using jstl along with jsp;
<script>
<c:if test="${isLoginPage}">
// your js code here
</c:if>
</script>
You can achive the same result with using java answered here.
Or only with javascript, alternatively you can get the current url with;
var url = window.location.href;
And check url whether is login url. However this approach does not work in single page applications.
I've got a facebook modal pop-up that I have a facebook like/share button pasted in.
The button works fine. The modal close button works fine. I'm wondering if there's a way for me to have the modal close AFTER both the like and share button have been clicked using PHP. Thoughts? Thanks!
<div class="modal fade" id="modal-example" tabindex="-1" role="dialog" aria-labelledby="modal-example" 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"><i class="fa fa-times"></i></button>
<h1 class="modal-title" id="myModalLabel">LIKE AND SHARE TO WIN</h1>
</div>
<div class="modal-body">
<h4>Like us on facebook, share our page, and automatically get entered to win!</h4>
<div class="fb-like" data-href="https://www.facebook.com/page" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can manually close a modal by calling $('modalname').modal('hide'); in your JavaScript, or calling to something that in turn calls to the hide method.
http://getbootstrap.com/javascript/#modals-usage
My original issue:
I know that when this gets coded, the variables get written when the request is sent from the server. So I'll probably have to use JQuery, but I'm lost on where to even start (I don't know JS).
This code works when I refresh the page, but I want it to refresh the data being displayed when the modal is clicked on.
Can anyone point me in the right direction?
My self found fix, for others to view:
Modal Code:
<div class="modal fade ajaxmodal" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" 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">Trace Logging</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
JS:
$('.ajaxmodal').on('show.bs.modal', function () {
$('#modal-body').load('trace.php');
});
trace.php has formatted html that displays on click perfectly.
Updated my original question to contain my answer as well.