Minimalist jQuery Modal Dialog
Posted: Sat Dec 20, 2008 2:43 pm
I finally figured out how to make a minimalist jQuery Modal Dialog that works across browser platforms. I'm taking any kind of suggestions for improvement that you want to throw at me. Also know that part of the credit goes to "redsquare" here.
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.
3. Now style it in the HTML of your page like the following. Note this is only an example.
4. Now, in the HTML of your page where you want to show this, activate it with an event like this:
Therefore, when someone clicks a link or button or widget with a class of confirm, it throws up your modal dialog on a dim overlay, styled the way you want, along with any buttons or whatever that you want. It puts more of the HTML inside the modal under your control, and requires less aggravation to get it going or to learn it.
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>