Generally people here are suggesting lightboxes
, which work wonderfully for galleries, but are complete overkill for info boxes like this. Lightboxes can slow your website down alot, as they require a lot of assets to be included, multiple HTTP requests for .css
files and .js
files, when your problem could be solved via CSS and JS.
Check out this fiddle: http://jsfiddle.net/3vmL6/1/
In your code you have a a simple div
of a class modal-dialog
, which is automatically hidden in the css (see the fiddle).
<div id="info-modal" class="modal-dialog">
<div>
<a href="#close" title="Close" class="close">x</a>
<h2>Hello!</h2>
<p>You can display any information you want here!</p>
</div>
A simple snippet of JQuery in your document is used to call a specific instance of the modal-dialog, allowing you to have multiple unique div
s using different ID's, but all belonging to the same class.
$("#click-me").click(function () {
$.ajax({
success: function (data) {
console.log(data);
$('#info-modal').addClass("show");
},
async: true
});
});
$(".modal-dialog .close").click(function(){
$(this).closest(".modal-dialog").removeClass("show");
});