1. First, include your jQuery library, of course.
2. Now include this PHP by saving the following as modal.php and then doing <? require_once('modal.php') ?> in your code. Use it only on the pages where you need it.
Code: Select all
<?php ?>
<script>
var _IE6OrLess = 0; var _PrevHTMLColor = ''; var _PrevBodyColor = '';
function Modal(sHTML) {
$('<div />').addClass('overlay').appendTo('body').show();
if (_IE6OrLess) {
_PrevHTMLColor = $('html').css('background-color');
_PrevBodyColor = $('body').css('background-color');
$('html').css('background-color','#444');
$('body').css('background-color','#FFF');
}
$('<div />').html(sHTML).addClass('modal').appendTo('body').fadeIn();
}
function CloseModal() {
$('.modal').fadeOut('normal',function() {
$('.modal').remove();
$('.overlay').remove();
if (_IE6OrLess) {
$('html').css('background-color',_PrevHTMLColor);
$('body').css('background-color',_PrevBodyColor);
}
});
}
</script>
<!--[if lte IE 6]>
<script>_IE6OrLess = 1;</script>
<![endif]-->
<style>
.overlay {
border-width: 0;
margin: 0;
padding: 0;
background:black none repeat scroll 0 0;
display:none;
height:2500px;
left:0;
filter:alpha(opacity=70);
opacity: 0.70;
top:0;
width:100%;
z-index:50;
display:none;
position:fixed;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;
}
.modal{
position:absolute;
left:45%;
top:25%;
z-index:51;
display: none;
}
</style>
<!--[if lte IE 6]>
<style>
.overlay {
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
filter:alpha(opacity=70);
}
</style>
<![endif]-->
Code: Select all
<style>
.modal {
background: #136bb2;
color: #FFF;
padding: 15px;
border: 3px solid #1789e1;
border-right: 3px solid #0e548a;
border-bottom: 3px solid #0e548a;
}
</style>Code: Select all
<script>
$().ready(function(){ //when page has fully loaded
$('.confirm').click(function() {
Modal('This is your modal example.<br /><br /><input type="button" value="Close" onclick="CloseModal();" />');
return false;
});
});
</script>