Sun Dial Menu
tempusfugit.me.uk
 

Timed Modal

On pages that are descriptions of other pages or sections it make no sense to have a button that just renders the same page. The solution is to remove the button (probably a menu item) or to display a modal dialog. An alert() is a solution but I would prefer it to be a timed modal.

I do have a working example of a Timed Modal on this website that uses the Bootstrap/jQuery code below:

The jsfiddle example

The JavaScript for the jsfiddle example:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" id="modal" data-toggle="modal">
Launch demo modal</button>
Top Menu

The linked stylesheet, JavaScript and jQuery (above) would need work for use on this website.............

The Modal and the JavaScript:

The Modal and JavaScript for the jsfiddle example:

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title/h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> <div class="modal-body">
... </div> </div> </div> </div>

<script>
$(document).ready(function(){ $('#modal').click(function(){ $('#exampleModal').modal('show'); setTimeout(function() {$('#exampleModal').modal('hide');}, 2000); }); }); </script>
Top Menu

Having seen an access for this page and that it was in the old design I updated it and put formatting for the code examples.

I must admit I am not sure what I meant in my first paragraph above. I think that I was alluding to the display of "Help" information. Designing for mobile devices where Tool Tips do not work on touch screens.

Also the use of W3.css Modals was not linked at the time of writing the orignal page. However, these don't seem to have a "timed" function - not to say that they cannot be made to!

The timed modal would be a good way of demonstrating the propagation of events with the DOM.

Site design by Tempusfugit Web Design -